lila/ui/bits/css/practice/_side.scss

.practice-side {
  @import '../learn/progress';
  @extend %box-radius, %flex-column;
  @include backdrop-blur-if-transparent;

  gap: 1em;
  background: $c-bg-box;
  border: $border;
  text-align: center;
  align-self: start;
  padding: 1em 1.25em;

  @keyframes fat-glide {
    50% {
      transform: translateY(-4px);
    }
  }

  &__decoration {
    display: block;
    width: 160px;
    aspect-ratio: 1;
    margin: auto;
    opacity: 0.7;

    @include if-light {
      filter: brightness(0.15);
    }
  }

  &:hover .practice-side__decoration {
    animation: 1.5s fat-glide ease-in-out infinite;
  }

  &__header {
    @extend %flex-column;

    gap: 1em;

    .practice-side__title {
      @extend %flex-column;

      justify-content: center;
    }

    h1 {
      font-size: 3.3em;
    }

    h2 {
      font-size: 1.3em;
    }

    @media (width < $small) {
      flex-flow: row nowrap;
      gap: $block-gap;
      text-align: left;

      .practice-side__decoration {
        width: min(100px, 30vw);
        margin: 0;
      }
    }
  }

  form {
    text-align: center;
    font-size: 0.9em;

    button {
      opacity: 0.6;
      color: $c-font;

      &:hover {
        opacity: 1;
      }
    }
  }
}