body{
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2%;
}
.box{
    background-color: #0071ff;
}
.grid-container{
    display: grid;
    grid-auto-columns: 200px;
    grid-auto-rows: 1fr;
    gap: 1em;
    grid-template-areas:
    "box-1 box-4 box-4"
    "box-3 box-2 box-5";
}
@media(max-width: 56em){
    .grid-container{
        grid-template-areas: 
        "box-1 box-2 box-3"
        "box-4 box-5 box-5"
        "box-4 box-5 box-5";
    }
}
@media(max-width: 42em){
    .grid-container{
        grid-template-areas: 
        "box-1 box-2 "
        "box-4 box-3 "
        "box-4 box-5 ";
    }    
}