.dhero { position: relative; padding: 0; margin-top: 18px; }
.dhero .box { overflow: hidden; display: grid; grid-template-columns: 1fr 1.1fr; }
.dhero .l { padding: 34px; display: flex; flex-direction: column; gap: 16px; border-right: 3px dashed var(--ink); }
.dhero .r { position: relative; min-height: 420px; }
.dhero .r img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dhero .flag { font-size: 64px; line-height: 1; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.facts .box { padding: 14px 16px; }
.facts small { font: 700 11px "Space Mono"; letter-spacing: .1em; }
.facts b { display: block; font-size: 18px; line-height: 1.25; margin-top: 4px; }
.facts .box:nth-child(1) { background: var(--sun); } .facts .box:nth-child(2) { background: var(--mint); } .facts .box:nth-child(3) { background: var(--pink); }
.facts .box:nth-child(4) { background: var(--lilac); } .facts .box:nth-child(5) { background: #cfe8ff; }
.cities { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.city { overflow: hidden; display: block; padding: 0; }
.city img { width: 100%; aspect-ratio: 1; object-fit: cover; border-bottom: 2.5px solid var(--ink); }
.city div { padding: 10px 12px; }
.city b { font-size: 18px; display: block; }
.city small { font: 400 11px "Space Mono"; }
.guides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.weather { overflow: hidden; }
.weather table { width: 100%; border-collapse: collapse; font-size: 15px; }
.weather th, .weather td { padding: 12px 14px; border-bottom: 2px solid var(--ink); text-align: left; }
.weather th { background: var(--sun); font: 700 11px "Space Mono"; letter-spacing: .1em; }
.weather tr:last-child td { border-bottom: 0; }
.good { background: var(--mint); font-weight: 800; border-radius: 999px; padding: 2px 10px; border: 2px solid var(--ink); white-space: nowrap; }
.dvlogs { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: 16px; overflow-x: auto; padding: 4px 6px 16px; }
@media (max-width: 1000px) { .dhero .box { grid-template-columns: 1fr; } .dhero .l { border-right: 0; border-bottom: 3px dashed var(--ink); } .cities { grid-template-columns: repeat(3, 1fr); } .guides { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr 1fr; } .cities { grid-template-columns: repeat(2, 1fr); } .dhero .r { min-height: 280px; } .weather th, .weather td { padding: 9px; font-size: 14px; } }