body { margin-block-start: 0; }

main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
}

main > :not([data-percentile-map]) { grid-column: 1 / -1; }
main > [data-percentile-map] { min-width: 0; }
main > p { margin: 0 0 .3rem; font-size: .9rem; }
main > [data-percentile-map] > h2 { margin: 0 0 .1em; }

.percentile-map { height: clamp(420px, 82vh, 960px); }

@media (max-width: 760px) {
    main { grid-template-columns: minmax(0, 1fr); row-gap: .5rem; }
    .percentile-map { height: clamp(320px, 65vh, 600px); }
}

.percentile-legend { display: flex; flex-wrap: wrap; gap: .15rem .75rem; padding-block: .15rem; }
.percentile-marker {
    display: grid;
    place-items: center;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 2px #222;
    color: white;
    box-sizing: border-box;
    font: bold 11px/1 sans-serif;
    text-shadow: 0 1px 2px #222;
}