Bundle Card

.bundle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  width: 20.5rem;
  min-width: 20.5rem;
  min-height: 24.9rem;
  height: 24.9rem;

  &::after {
    content: '';
    position: absolute;
    z-index: 1;
    bottom: 1.7rem;
    width: 100%;
    max-width: 19.1rem;
    height: 8.9rem;
    opacity: 0.7;
    background: linear-gradient(
      180deg,
      rgba(29, 29, 27, 0) 0%,
      rgba(29, 29, 27, 0.58) 44.97%,
      $black 100%
    );
    border-radius: 0.4rem;
  }

  &__image {
    position: relative;
    width: 100%;
    max-width: 20.5rem;
    height: 24.9rem;
    overflow: hidden;
    background: url('./assets/example-content/bundle-carousel/bundle-card-placeholder.jpg')
      no-repeat;
    background-size: cover;

    img {
      width: 100%;
      max-width: 19.1rem;
      height: 23.4rem;
      object-fit: cover;
      object-position: center;
      border: 0.2rem solid $blue;
      border-radius: 0.4rem;
    }

    &::before {
      content: '';
      position: absolute;
      z-index: 1;
      margin-top: 0;
      width: 100%;
      max-width: 19.1rem;
      height: 4.5rem;
      opacity: 1;
      border-radius: 0.4rem;
      background: $black;
    }

    &::after {
      content: '';
      position: absolute;
      z-index: 1;
      top: 4.5rem;
      width: 100%;
      max-width: 19.1rem;
      height: 5.4rem;
      opacity: 1;
      border-radius: 0.4rem;
      background: linear-gradient(
        180deg,
        rgba(29, 29, 27, 0) 0%,
        rgba(29, 29, 27, 0.58) 44.97%,
        $black 100%
      );
      transform: rotate(-180deg);
    }
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.7rem 1.6rem;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    text-decoration: none;
    white-space: break-spaces;

    &--category {
      font-family: $text-font-ef;
      text-transform: uppercase;
      color: $light-blue;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 1.2rem;
      letter-spacing: 0.08em;

      @include text-limit(1);
    }

    &--title {
      color: $white;
      font: $efl-heading-4;
      font-weight: 500;

      @include text-limit(2);
    }
  }

  &__trophy {
    position: absolute;
    bottom: 2.8rem;
    right: 2.2rem;
    z-index: 2;

    img {
      width: 6.4rem;
      height: 6.4rem;
    }
  }

  @media screen and (min-width: $mq-small) {
    width: 29.2rem;
    min-width: 29.2rem;
    min-height: 35.5rem;
    height: 35.5rem;

    &::after {
      max-width: 27.2rem;
      bottom: 2rem;
    }

    &__image {
      max-width: 29.2rem;
      height: 35.5rem;

      img {
        max-width: 27.2rem;
        height: 33.5rem;
      }

      &::before {
        max-width: 27.2rem;
      }

      &::after {
        max-width: 27.2rem;
        height: 9.3rem;
      }
    }

    &__content {
      padding: 2.5rem 2.4rem;
    }

    &__trophy {
      bottom: 3.8rem;
      right: 3.2rem;

      img {
        width: 8rem;
        height: 8rem;
      }
    }
  }
}