@layer components {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(28ch, 100%), 1fr));
    gap: var(--space-l) var(--space-inline-m);
    margin-block-start: var(--space-l);
  }

  .card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--space-inline-s);
    padding: var(--space-l) var(--space-inline-l);
  }

  .card h3 { font-size: var(--text-m); }

  .card .tag {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--quiet);
    margin-block-start: var(--space-2xs);
  }

  .card p { font-size: var(--text-s); color: var(--card-ink); margin-block: var(--space-s) 0; }

  .card-featured {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-m) var(--space-inline-2xl);
    padding: var(--space-2xl) var(--space-inline-2xl);
  }

  .card-featured--reverse { flex-direction: row-reverse; }

  .card-featured.card-featured--reverse img { max-inline-size: 15rem; max-block-size: 15rem; }

  .card-featured-body { flex: 1 1 22ch; }

  .card-featured img {
    max-block-size: 20rem;
    max-inline-size: 22rem;
    min-inline-size: 0;
    inline-size: auto;
    margin-inline: auto;
    mix-blend-mode: multiply;
  }
}