/* ── Medium breakpoint: 821px–1024px ─────────────────────────────────────
   Targets the gap between the existing 820px rules and 1025px+ desktop.
   3-column and 4-column grids collapse to 2 columns at this range.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 821px) and (max-width: 1024px) {
  .kh-3col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .kh-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .kh-hero-grid {
    gap: 36px !important;
  }
  .kh-2col {
    gap: 36px !important;
  }
}