.official-maps { margin-top: 42px; }
.official-maps > h3 { margin-bottom: 8px; }
.official-maps > p { margin-bottom: 18px; }
.official-map-card { padding: 12px; margin: 0 0 22px; }
.official-map-card h4 { margin: 2px 4px 6px; font-size: 1.1rem; }
.official-map-card > p { margin: 0 4px 12px; }
.official-map-frame { display: block; width: 100%; height: clamp(420px, 60vw, 670px); border: 0; border-radius: var(--radius); background: var(--card); }
.official-map-frame--video { height: auto; aspect-ratio: 16 / 9; min-height: 260px; }
.official-map-frame--sat24 { max-width: 600px; height: 600px; margin-inline: auto; }
.official-map-card .map-source { margin: 10px 4px 2px; }
.official-map-card .map-source a { color: var(--accent, #087f8c); text-decoration: underline; text-underline-offset: 2px; }
.official-map-open { display: inline-flex; align-items: center; min-height: 44px; margin: 2px 4px 4px; padding: 9px 16px; border-radius: 999px; background: #0a8f90; color: #fff; font-weight: 700; text-decoration: none; }
.official-map-open:hover, .official-map-open:focus-visible { background: #076d71; color: #fff; }
.official-maps--featured { margin-top: 16px; }
.official-maps--featured h3 { margin: 2px 4px 8px; font-size: 1.2rem; }
@media (max-width: 640px) {
  .official-map-card { padding: 8px; }
  .official-map-frame { height: 500px; }
  .official-map-frame--video { height: auto; min-height: 190px; }
  .official-map-frame--sat24 { height: 500px; }
}