#map{

height:100%;

border-radius:12px;

overflow:hidden;

}

/* ==============================
   MOBILE MAP
   ============================== */

@media (max-width: 768px) {

    #map {
        width: 100%;

        height: 68dvh;
        min-height: 500px;

        border-radius: 10px;
    }


    /*
     Leaflet popup must fit
     inside phone viewport.
    */

    .leaflet-popup-content-wrapper {
        max-width: 92vw;
        max-height: 76dvh;

        overflow-y: auto;
        overflow-x: hidden;

        box-sizing: border-box;
    }

    .leaflet-popup-content {
        width: auto !important;

        max-width: 86vw;

        margin:
            12px 14px;
    }


    /*
     Touch-friendly Leaflet controls.
    */

    .leaflet-control-zoom a {
        width: 36px;
        height: 36px;

        line-height: 36px;

        font-size: 20px;
    }

}


@media (max-width: 480px) {

    #map {
        height: 64dvh;
        min-height: 460px;
    }

}