/* The archipelagos use separate map scales to keep all cities selectable. */
.weather-heading { border-top: 4px solid #e30613; padding: 1.5rem 0; }
.weather-heading span { font: bold .78rem Arial,sans-serif; letter-spacing: .12em; color: #b50311; }
.weather-heading h1 { font: bold clamp(2.5rem,5vw,4.75rem)/1.1 Georgia,serif; }
.weather-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 2rem; }
.weather-maps { display: grid; grid-template-columns: 3fr 2fr; align-content: start; gap: .5rem; }
.weather-region { background: #eaf4f6; border-radius: .5rem; padding: .65rem; }
.weather-region:first-child { grid-row: span 2; }
.weather-region h3 { font: bold 1rem Arial,sans-serif; color: #234856; }
.weather-region svg { width: 100%; }
.weather-region path { fill: #fdfcf2; stroke: #829f96; stroke-width: 1.2; }
.weather-region circle { fill: #166174; stroke: white; stroke-width: 1.5; }
.weather-region text { font: bold 13px Arial,sans-serif; fill: #133944; paint-order: stroke; stroke: white; stroke-width: 3px; }
.weather-region a:hover circle, .weather-region a:focus circle, .weather-region a.selected circle { fill: #e30613; r: 7px; }
.weather-day { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; border-top: 1px solid #d2e1e5; padding: .9rem 0; }
.weather-day small { color: #54636a; }
.weather-page #avisos { margin: 1.5rem 0; }
@media (max-width: 760px) {
    .weather-layout { grid-template-columns: 1fr; }
    .weather-layout > section { grid-row: 1; }
}