.levels-page{}

.levels-hero-grid{
 display:grid;
 grid-template-columns:45% 55%;
 gap:var(--space-4);
 align-items:center;
}
.levels-hero-text{max-width:520px}
.levels-hero-image img{width:100%;border:2px solid var(--accent-neon-violet)}
.levels-cta{margin-top:var(--space-3)}

.levels-map-wrap{text-align:center}
.levels-map-desc{max-width:800px;margin-inline:auto}
.levels-map-image img{width:100%;border:2px solid var(--accent-neon-violet)}
.levels-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-3)}

.levels-zone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.levels-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}

.levels-diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}

.levels-featured-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
.levels-featured-grid img{margin-bottom:var(--space-2)}

.levels-tips-wrap{max-width:600px;margin-inline:auto}

.levels-final-wrap{text-align:center}
.levels-cta-large{margin-top:var(--space-3)}

@media(max-width:1020px){
 .levels-hero-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
 .levels-zone-grid{grid-template-columns:repeat(2,1fr)}
 .levels-type-grid{grid-template-columns:repeat(2,1fr)}
 .levels-diff-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
 .levels-zone-grid,.levels-type-grid,.levels-featured-grid,.levels-legend{grid-template-columns:1fr}
}