.osm-map {
    width: 100%;
    aspect-ratio: var(--map-aspect, 16/9);
    max-height: 80vh;
    position: relative;
    display: block;
    z-index: 0;
    border-radius: 12px;
    overflow: hidden;
}

@supports not (aspect-ratio: 1 / 1) {
    .osm-map {
        height: var(--map-height, 50vh);
    }
}

.osm-map>.map {
    position: absolute;
    inset: 0;
}

.leaflet-container {
    touch-action: pan-x pan-y;
}

@media (min-width: 640px) {
    .osm-map {
        --map-aspect: 3/2;
    }
}

@media (min-width: 1024px) {
    .osm-map {
        --map-aspect: 2/1;
    }
}