*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* .wrapper-1{
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px 200px 200px;
    grid-gap: 10px 10px;
    grid-area: 
    "box-1-1 box-1-1 box-1-1"
    "box-1-3 box-1-2 box-1-2"
    "box-1-4 box-1-2 box-1-2"
    "box-1-5 box-1-5 box-1-5";
}
.box-1-1{
    background-color: aquamarine;
    grid-area: box-1-1;
}
.box-1-2{
    background-color: orange;
    grid-area: box-1-2;
}
.box-1-3{
    background-color: deepskyblue;
    grid-area: box-1-3;
}
.box-1-4{
    background-color: greenyellow;
    grid-area: box-1-4
}
.box-1-5{
    background-color: darkviolet;
    grid-area: box-1-5;
} */

.wrapper-1{
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 150px 150px 150px 150px;
    grid-gap: 10px 10px;
    color: white;
    font-size: 25px;
    text-shadow: 3px 3px 4px black;
    /* transform: scale(0.7); */
}
.box-1-1{
    background-color: aquamarine;
    grid-column: 1 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-1-2{
    background-color: yellowgreen;
    grid-row: 2 / 4;
    grid-column: 2 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-1-3{
    background-color: orange;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-1-4{
    background-color: deepskyblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-1-5{
    background-color: darkviolet;
    grid-column: 1 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* wrapper-1-finished=wrapper-2-started */
/* wrapper-1-finished=wrapper-2-started */
/* wrapper-1-finished=wrapper-2-started */
/* wrapper-1-finished=wrapper-2-started */
/* wrapper-1-finished=wrapper-2-started */
.wrapper-2{
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px 10px;
    color: white;
    font-size: 25px;
    text-shadow: 3px 3px 4px black;
    /* transform: rotate(180px); */
}
.box-2-1{
    background-color: dodgerblue;
    grid-column: 1 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-2-2{
    background-color: yellow;
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-2-3{
    background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-2-4{
    background-color: forestgreen;
    grid-column: 1 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* wrapper-3-finished=wrapper-4-started */
/* wrapper-3-finished=wrapper-4-started */
/* wrapper-3-finished=wrapper-4-started */
/* wrapper-3-finished=wrapper-4-started */
/* wrapper-3-finished=wrapper-4-started */
.wrapper-3{
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 150px 150px 150px;
    grid-gap: 10px 10px;
    color: white;
    font-size: 25px;
    text-shadow: 3px 3px 4px black;
    /* transform: skew(18deg); */
}
.box-3-1{
    background-color: aquamarine;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-3-2{
    background-color: orange;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-3-3{
    background-color: yellowgreen;
    grid-row: 1 / 3;
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-3-4{
    background-color: darkviolet;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-3-5{
    background-color: fuchsia;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-3-6{
    background-color: deepskyblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media(max-width:480px){
    .container{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .wrapper-1{
        /* transform: scale(0.7); */
        width: 100%;
        padding: 20px;
    }
    .wrapper-2{
        transform: scale(0.7);
        width: 100%;
    }
    .wrapper-3{
        transform: scale(0.7);
        width: 100%;
    }
}