body {
    background-color: hsl(198, 68%, 83%);
}

h1 {
    color: #ffffff;
    background-color: blue;
    text-align: center;
    text-shadow: 4px 8px 10px rgb(0, 255, 145);
    font-size: 3rem;
}


.container {
    width: 80%;
    margin: 30px auto;
    padding: 20px;
    display: grid;
    grid-template-rows: 150px 150px 150px;
    gap: 15px;
    box-shadow: 0px 0px 10px 10px rgb(231, 144, 123);

}

.children {
    font-size: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(230, 223, 223);
    border-radius: 4px;
}

#box-1 {
    grid-row: 1/4;
    background-color: #3e8f20;
}

#box-2 {
    grid-column: 2/4;
    background-color: #3e8f20;
}

#box-6 {
    grid-row: 2/4;
    grid-column: 4/5;
    background-color: #3e8f20;
}

#box-3,
#box-5,
#box-7 {
    background-color: #ed3437;
}

#box-4,
#box-8 {
    background-color: #fab32f;
}

@media (max-width : 900px) {


    #box-1 {
        grid-row: 1/3;
        background-color: #3e8f20;
    }

    #box-2 {
        grid-column: auto;
        background-color: #3e8f20;
    }

    #box-6 {
        grid-row: auto;
        grid-column: auto;
        background-color: #3e8f20;
    }

    #box-3,
    #box-5,
    #box-7 {
        background-color: #ed3437;
    }

    #box-4,
    #box-8 {
        background-color: #fab32f;
    }

    .container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(4, 150px);
    }

}

@media (max-width : 600px) {

    #box-1 {
        grid-row: auto;
        background-color: #3e8f20;
    }

    #box-2 {
        grid-column: auto;
        background-color: #3e8f20;
    }

    #box-6 {
        grid-row: auto;
        grid-column: auto;
        background-color: #3e8f20;
    }

    #box-3,
    #box-5,
    #box-7 {
        background-color: #ed3437;
    }

    #box-4,
    #box-8 {
        background-color: #fab32f;
    }

    .container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(8, 150px);
    }

}