@layer components {
  .class-grid {
    display: grid;
    gap: var(--gap-md)
  }

  @media (min-width: 61.25rem) {
    .class-grid {
      grid-template-columns: repeat(3, 1fr)
    }
  }

  .class-card {
    display: flex;
    flex-direction: column;
    padding: var(--gap-md);
    border: 1px solid var(--ceniza);
    border-radius: var(--radius-lg);
    background-color: var(--grafito)
  }

  .class-card--feat {
    border-color: var(--lava-oscuro);
    background-color: var(--carbon-raise);
    box-shadow: 0 0 0 1px hsl(17 77% 54% / 0.35)
  }

  .class-card__tag {
    display: inline-flex;
    align-self: flex-start;
    margin-block-end: 0.9rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background-color: hsl(17 77% 54% / 0.14);
    color: var(--lava);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase
  }

  .class-card h3 {
    margin-block-end: 0.3rem
  }

  .class-card__desc {
    margin-block-end: var(--gap-sm);
    font-size: 0.9rem
  }

  .class-card__stats {
    margin-block-end: var(--gap-sm)
  }

  .class-card__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-block-start: auto;
    padding-block-start: var(--gap-sm);
    border-top: 1px solid var(--ceniza)
  }
}