/* Cards */
@layer variants {
  /* Base */
  .card {
    border-radius: 0.75rem;
    display: grid;
    padding: 1.6rem;
    gap: 1.25rem;
    overflow: clip;
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px hsla(0, 0%, 0%, 0.05);
  }

  .card__title {
    font-weight: 500;
  }
  .card__title-accent {
    color: var(--color-primary);
    font-style: italic;
  }
  .card__icon {
    width: 60%;
    height: auto;
    margin-top: auto;
  }

  /* Variants */
  .card--create {
    background: var(--color-create-bg);
    padding: 1.5rem;
    padding-inline: 1.25rem;
    grid-area: create;
  }
  .card--create .card__title {
    font-size: 1.875rem;
    color: var(--color-text-dark);
  }

  .card--hero {
    padding: 2.5rem 1.75rem;
    text-align: center;
    background: var(--color-primary);
    color: var(--color-white);
    grid-area: hero;
    align-items: center;
    justify-items: center;
  }
  .card--hero .hero__title {
    font-size: 2.82rem;
  }
  .hero__title-highlight {
    color: var(--color-accent);
  }
  .hero__title-italic {
    font-style: italic;
  }
  .hero__stars {
    width: 70%;
    margin: 0 auto 0.75rem;
  }

  .card--schedule {
    background: var(--color-schedule-bg);
    grid-area: schedule;
    text-align: center;
    align-items: center;
    justify-items: center;
  }
  .card--schedule .card__title {
    font-size: 1.45rem;
  }
  .card--schedule .card__text {
    font-size: 1.015625rem;
  }

  .card--platforms {
    background: var(--color-white);
    grid-area: platforms;
    padding: 1.3rem;
  }
  .card--platforms .card__image {
    filter: drop-shadow(0 10px 13px hsla(0, 0%, 0%, 0.11));
    border-radius: 100vw;
    order: -1;
    transition: filter 0.3s ease;
  }
  .card--platforms .card__title {
    font-size: 1.5rem;
  }

  .card--consistent {
    background: var(--color-accent);
    padding: 1.25rem 1.25rem 0;
    grid-area: consistent;
  }
  .card--consistent .card__title {
    font-size: 1.5rem;
  }
  .card--consistent .card__image {
    width: 75%;
    margin-bottom: -1.3rem;
    align-self: end;
  }

  .card--growth {
    background: var(--color-white);
    grid-area: growth;
    padding: 1.5rem;
    gap: 0.4rem;
  }
  .card--growth .card__title {
    font-size: 3rem;
  }
  .card--growth .card__text {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  .card--growth .card__image {
    width: 60%;
  }

  .card--followers {
    background: var(--color-primary);
    color: var(--color-white);
    grid-area: followers;
    text-align: center;
    align-items: center;
    justify-items: center;
    gap: 2.5rem;
  }
  .card--followers .card__image {
    width: 90%;
  }
  .card--followers .card__title {
    font-size: 2.1rem;
  }

  .card--ai {
    background: var(--color-accent);
    grid-area: ai;
  }
  .card--ai .card__title {
    font-size: 1.9rem;
    color: var(--color-text-dark);
  }
  .card--ai .card__image {
    width: 70%;
  }

  /* Tablet */
  @media (min-width: 600px) {
    .card {
      padding: 1.7rem;
    }

    .card--create {
      padding-inline: 1.7rem;
    }
    .card--create .card__title {
      font-size: 2rem;
    }
    .card--create .card__icon {
      width: 75%;
    }

    .card--hero {
      padding: 2.5rem 1.7rem;
    }
    .card--hero .hero__title {
      font-size: 5rem;
    }
    .card--hero .hero__stars {
      width: 50%;
    }
    .card--hero .hero__reviews {
      font-size: 1.25rem;
    }

    .card--schedule .card__title {
      font-size: 1.8rem;
    }
    .card--schedule .card__text {
      font-size: 1.25rem;
    }
    .card--schedule .card__image {
      margin: 0 auto;
      width: 95%;
    }

    .card--platforms .card__title,
    .card--consistent .card__title,
    .card--ai .card__title {
      font-size: 2.3rem;
    }
    .card--platforms .card__image {
      width: 100%;
      max-width: 18rem;
    }

    .card--consistent {
      padding-bottom: 0;
    }
    .card--consistent .card__image {
      width: 100%;
      margin-bottom: -6rem;
    }

    .card--growth .card__title {
      font-size: 3rem;
    }
    .card--growth .card__text {
      font-size: 1.25rem;
    }

    .card--ai .card__image {
      width: 100%;
    }

    .card--followers {
      display: grid;
      align-items: center;
      justify-items: start;
      gap: 1.5rem;
      text-align: start;
    }
    .card--followers .card__image {
      width: 100%;
      margin: 0;
    }
    .card--followers .card__title {
      font-size: 2.4rem;
      text-align: start;
    }
  }

  /* Large tablet */
  @media (min-width: 960px) and (max-width: 1023px) {
    .card {
      padding: 2.3rem;
      gap: 1.3rem;
    }

    .card--create {
      padding-inline: 2rem;
    }
    .card--create .card__title {
      font-size: 2.7rem;
    }

    .card--hero .hero__title {
      font-size: 5.87rem;
    }
    .card--hero .hero__stars {
      width: 80%;
    }
    .card--hero .hero__reviews {
      font-size: 1.9rem;
    }

    .card--schedule .card__title {
      font-size: 2.5rem;
    }
    .card--schedule .card__text {
      font-size: 1.53rem;
    }

    .card--platforms .card__title,
    .card--consistent .card__title,
    .card--ai .card__title {
      font-size: 3rem;
    }
    .card--platforms .card__image {
      max-width: 23rem;
    }

    .card--consistent .card__image {
      margin-bottom: -9rem;
    }

    .card--growth .card__title {
      font-size: 5rem;
    }
    .card--growth .card__text {
      font-size: 1.53rem;
    }

    .card--followers .card__title {
      font-size: 2.8rem;
    }
  }

  /* Desktop */
  @media (min-width: 1024px) {
    .card--create {
      padding-inline: 2rem;
      align-content: center;
    }
    .card--create .card__title {
      font-size: 2.5rem;
    }
    .card--create .card__icon {
      width: 96%;
    }

    .card--hero {
      padding: 3.5rem 3.5rem 4.2rem 3.5rem;
    }
    .card--hero .hero__title {
      font-size: 4rem;
    }
    .card--hero .hero__stars {
      width: 40%;
    }

    .card--platforms .card__image {
      width: 153%;
      max-width: 23rem;
      filter: drop-shadow(0 10px 20px hsla(0, 0%, 0%, 0.06));
    }
    .card--consistent .card__title,
    .card--platforms .card__title {
      font-size: 2.1rem;
    }
    .card--consistent .card__image {
      width: 100%;
      margin-bottom: -30%;
    }

    .card--schedule {
      align-items: start;
      align-content: center;
      text-align: left;
      padding: 1.7rem 2rem;
    }
    .card--schedule .card__text {
      font-size: 1.1625rem;
    }
    .card--schedule .card__image {
      width: 180%;
      max-width: 180%;
    }
    .card--schedule .card__title {
      font-size: 2rem;
    }

    .card--followers {
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      align-content: center;
    }
    .card--followers .card__image {
      width: 100%;
    }
    .card--followers .card__title {
      font-size: 2.5rem;
    }

    .card--growth {
      gap: 1rem;
    }
    .card--growth .card__image {
      width: 90%;
    }
    .card--growth .card__title {
      font-size: 4rem;
    }
    .card--growth .card__text {
      margin-bottom: 2rem;
    }

    .card--ai {
      align-content: center;
      gap: 3rem;
    }
    .card--ai .card__title {
      font-size: 2.45rem;
    }
    .card--ai .card__image {
      width: 105%;
    }
  }
}