.weather {
    min-height: 100%;
    gap: var(--content-padding);
    padding: var(--content-padding);
}

.mapInfo {
    grid-area: mapInfo;
    display: grid;
    gap: var(--content-padding);
}

.map {
    grid-area: map;
}

.forecastGraph {
    grid-area: forecastGraph;
}

@media screen and (min-width: 576px) {
    .mapInfo {
        height: 100%;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 100%;
    }
}

@media screen and (min-width: 768px) {
    .weather {
        height: 100%;
    }

    .mapInfo {
        height: 100%;
        grid-template-columns: 100%;
        grid-template-rows: repeat(3, 1fr);
    }
}


@media screen and (min-width: 960px) {
    .weather {
        display: grid;
        grid-template-columns: 70% 30%;
        grid-template-rows: calc((100% / 3.103) + 1.2em + 11rem) calc(100% - ((100% / 3.103) + 1.2em + 11rem));
        grid-template-areas:
        "mapInfo map"
        "forecastGraph forecastGraph";
    }

    .mapInfo {
        height: 100%;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 100%;
        margin-block: 0;

        .graphContainer__info-container {
            grid-area: info;
            overflow-x: auto;
            overflow-y: auto;
            display: flex;
            flex-wrap: wrap;
        }
    }
}