@media screen and (max-width: 1620px) {
    .sub-section-1-span1 {
        font-size: 4.5rem;
    }

    .container-section-1 {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 3fr 5fr .5fr;
    }

}

@media screen and (max-width: 1393px) {
    .sub-section-1-span1 {
        font-size: 4rem;
    }

    /* .sub-section-1-span2 {
        font-size: 2.7rem;
    } */

    .container-section-1 {
        grid-template-columns: .5fr 1fr .5fr;
        grid-template-rows: 3fr 5fr .5fr;
    }

}

@media screen and (max-width: 1020px) {
    .sub-section-1-span1 {
        font-size: 4rem;
    }

    .sub-section-1-span2 {
        font-size: 2rem;
    }

    .container-section-1 {
        grid-template-columns: .3fr 1fr .3fr;
        grid-template-rows: 3fr 5fr .5fr;
    }

}

@media screen and (max-width: 730px) {
    .sub-section-1-span1 {
        font-size: 4rem;
    }

    .sub-section-1-span2 {
        font-size: 2rem;
    }

    .container-section-1 {
        grid-template-columns: .2fr 1fr .2fr;
        grid-template-rows: 3fr 5fr .5fr;
    }

}

@media screen and (max-width: 640px) {
    .sub-section-1-span1 {
        font-size: 3rem;
    }

    .sub-section-1-span2 {
        font-size: 1.2rem;
    }

    .container-section-1 {
        grid-template-columns: .05fr 1fr .05fr;
        grid-template-rows: 3fr 5fr .5fr;
    }

    .container-section-1 {
        /* grid-template-columns: 1fr 1fr 1fr; */
        grid-template-rows: 2.5fr 5fr .5fr;
    }


}

@media screen and (max-width: 520px) {
    .sub-section-1-span1 {
        font-size: 3rem;
    }

    .container-section-1 {
        grid-template-columns: .02fr 1fr .02fr;
        grid-template-rows: 1fr 5fr .5fr;
    }
    .weatherContainer {
        display: grid;
        grid-template-columns: auto;
        justify-content: center;
        width: 100%;
        flex-direction: column;
    }
}

@media screen and (max-width: 1260px) {
    .box-c {
        grid-column: 1;
        grid-row: 2;
    }
}

@media screen and (max-width: 620px) {
    .box {
        width: 55rem;
    }
    
}

@media screen and (max-width: 570px) {
    .box {
        width: 48rem;
    }
    
}
@media screen and (max-width: 500px) {
    .box {
        width: 40rem;
    }
    
}
@media screen and (max-width: 415px) {
    .box {
        width: 37rem;
    }
    
}