.mapa_escombraries {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(4, auto);
    gap: 1rem;
    grid-template-areas:
        "map escombrada"
        "map recollida"
        "map contenidors"
        "map neteja";
}

#map {
    grid-area: map;
    min-height: 500px;
}

#escombrada { 
  grid-area: escombrada;
  background-color: lightgreen; 
}
#recollida { 
  grid-area: recollida; 
  background-color: lightskyblue; 
}
#contenidors { 
  grid-area: contenidors;
  background-color: lightgray; 
}
#neteja { 
  grid-area: neteja;
  background-color: lightcoral; 
}

@media (max-width: 768px) {
    .contenedor {
        grid-template-columns: 1fr;
        grid-template-areas:
            "map"
            "escombrada"
            "recollida"
            "contenidors"
            "neteja";
    }

    #map {
        min-height: 350px;
    }
}