#map {
    width: 100%;
    height: 300px; /* Default height for small screens */
}

@media (min-width: 576px) {
    #map {
        height: 400px;
    }
}

@media (min-width: 768px) {
    #map {
        height: 450px;
    }
}

@media (min-width: 992px) {
    #map {
        height: 500px;
    }
}

@media (min-width: 1200px) {
    #map {
        height: 600px;
    }
}