Modern CSS: a complete overview

/* Markup: <section class="cards"> <article class="card"> <img> <div>…</div> </article> </section> */

/* The section becomes a container: the cards inside measure its width */
.cards {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: 1rem;
}

/* The card adapts to the place it is put in, not to the screen:
   in a wide column — picture on the left, in a narrow sidebar — on top */
@container (width > 28rem) {
  .card {
    grid-template-columns: 10rem 1fr;
    align-items: start;
  }
}

/* The field reacts to what was typed into it — without JavaScript */
.field:has(input:user-invalid) {
  --field-color: oklch(55% 0.2 25);
}
.field label,
.field .hint {
  color: var(--field-color, inherit);
}
.field input {
  border: 1px solid var(--field-color, #cfd1cf);
}

/* A card with a picture gets two columns, a card without one stays single */
.card:has(> img) {
  grid-template-columns: 8rem 1fr;
}

/* While a dialog is open, the page underneath does not scroll */
html:has(dialog[open]) {
  overflow: hidden;
}

/* Cards in a row: titles, texts and buttons line up across cards,
   however long the text in each one is */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-row: span 3;              /* title, text, button */
  grid-template-rows: subgrid;   /* rows are shared with the neighbours */
  gap: 0.75rem;
}

/* The order of layers is declared once: a later layer wins
   regardless of selector weight — no !important needed */
@layer reset, tokens, components, utilities;

@layer tokens {
  :root {
    --ink: oklch(21% 0.006 150);
    /* fluid size: 16px on a phone, 20px on a wide screen, no media queries */
    --text-base: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  }
}

@layer components {
  .button {
    min-height: 2.75rem;
    padding-inline: 1.25rem;
    border: 0;
    font-size: var(--text-base);
    background: var(--ink);
    color: white;
    transition: background-color 0.15s;

    /* nesting without Sass */
    &:hover {
      background: color-mix(in oklab, var(--ink) 80%, white);
    }
    &:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }
  }
}

@layer utilities {
  .hidden {
    display: none;
  }
}