/* "Five places. One connected life." — the four destination cards now sit on ONE
   row instead of two-by-two. Same content, same components, same colours; only the
   scale changes so four fit the 1140px wrap.
   The Kids banner (.hud-kidsban) below is deliberately untouched — she is keeping
   that at its current size. */
/* Was four across when there were four cards. With Life Vault added there are
   five, and four-across left one stranded alone on a second row. Three across
   gives 3 + 2, which reads as a deliberate block. */
@media (min-width:1101px){
  .hud-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:18px !important;
  }
  /* ~262px per card instead of 557, so the type and padding come down with it,
     otherwise the headings wrap to three lines and the cards look cramped */
  .hud-grid .hud-body{ padding:18px 18px 20px !important; }
  .hud-grid .hud-kick{ gap:9px !important; margin-bottom:11px !important; }
  .hud-grid .hud-ico{ width:38px !important; height:38px !important; }
  .hud-grid .hud-ico svg{ width:18px !important; height:18px !important; }
  .hud-grid .hud-cat{ font-size:.68rem !important; }
  .hud-grid .hud-t{ font-size:1.28rem !important; margin-bottom:6px !important; }
  .hud-grid .hud-tag{ font-size:.92rem !important; margin-bottom:9px !important; }
  .hud-grid .hud-d{ font-size:.86rem !important; line-height:1.55 !important; margin-bottom:14px !important; }
  .hud-grid .hud-go{ font-size:.84rem !important; }
  /* 4:3 on a narrow card left a very deep photo; 5:4 keeps the whole row shorter */
  .hud-grid .hud-media{ aspect-ratio:5 / 4 !important; }

  /* Shrinking the type removed any large-text allowance these two had, so the two
     terracotta tones are deepened one step to clear AA. Same colour family, and
     only inside this four-across row — the tablet and phone layouts keep the
     originals, where the type is bigger. */
  .hud-grid .hud-tag{ color:#A55742 !important; -webkit-text-fill-color:#A55742 !important; }
  /* .hud-cat is the SAME terracotta as the tag, not a per-card colour — so all four
     category labels needed it, not just the third card */
  .hud-grid .hud-cat{ color:#A55742 !important; -webkit-text-fill-color:#A55742 !important; }
}
/* between 761 and 1100 the original two-across is still the right call — four
   would be ~170px each and unreadable */