/* ==========================================================================
   highlights.css — per-block values for the Highlights page
   Mirrors the values the original page emitted inline. Font sizes are in `em`
   against the 10px root (see base.css), so 7.6em is 76px.
   ========================================================================== */

.block.page-title .headline {
  font-size: 7.6em;
  line-height: 1.5;
  font-weight: var(--title-weight);
  color: #333;
}

/*
 * The count lives here, not inline on the element: an inline custom property
 * beats a media query, so a grid whose columns are set in the markup can never
 * collapse on a phone. Same reason the logo bands set theirs in CSS.
 */
.block.gallery .gallery-grid {
  --columns: 3;
  --gap-x: 26px;
  --gap-y: 26px;
}

@media (max-width: 768px) {
  .block.page-title .headline {
    font-size: clamp(1em, 7.6em, 7vw);
  }

  .block.gallery .gallery-grid {
    --columns: 1;
  }
}