@import "https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css";

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    margin: 20px 20px 20px 20px;
    ;
}

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
/* Map container */
#map {
    width: 100%;
    height: 100%;
    min-height: 300px; /* base size */
    aspect-ratio: auto;
    box-sizing: border-box;
    border-radius: inherit;
}

/* Mobile (<=768px) */
@media screen and (max-width: 768px) {
    #map {
        min-height: 250px;
        aspect-ratio: auto;
    }
}

/* Desktop (>=1024px) */
@media screen and (min-width: 1024px) {
    #map {
        min-height: 500px;
    }
}

/* Widescreen (>=1216px) */
@media screen and (min-width: 1216px) {
    #map {
        min-height: 600px;
    }
}