@use "@/colors"

component
  flex: 1
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  font-size: 1.125em
  @include colors.panel-background

  .highlight
    color: rgba(black, 0.8)
    background-color: var(--color-red)
    border-radius: 2px
    padding: 0 2px

  > article
    display: flex
    flex-direction: column
    width: 720px
    color: var(--color-dark)

    > h1, h2
      color: white
      font-size: 2.5em

    > h1
      margin-left: -3px

    > h2
      font-size: 1.25em
      color: var(--color-blue)

    p, ul
      margin: 0.3em 0
      font-size: 0.75em

    a
      color: var(--color-blue)

    > div.columns
      margin: 1em 0 0 0
      display: grid
      column-gap: 2.5em
      grid-template-columns: auto 1fr

      > div
        display: flex
        flex-direction: column
        row-gap: 0.5em

        > h3
          font-size: 0.875em
          color: var(--color-orange)
          padding: 0.25em 0.375em
          border-radius: 0.25em
          background-color: rgba(black, 0.2)
          width: fit-content

        > div.starters
          display: grid
          grid-template-columns: repeat(4, min-content)
          gap: 0.5em

          > div
            display: flex
            flex-direction: column
            align-items: center
            background-color: black
            padding: 0.25em
            border-radius: 0.5em
            font-size: 0.75em
            cursor: pointer
            overflow: hidden

            &:first-child
              color: var(--color-green)

            &:hover
              > label
                color: var(--color-purple)

              > img
                scale: 0.9

            > img
              width: 64px
              height: 64px
              scale: 0.8
              transition: scale 0.2s ease-in-out

            > label
              font-size: 0.6em
              text-align: center
              cursor: inherit