body{
    margin:0;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
}

.container{
    display:grid;
    grid-template-columns: repeat(4, 150px);
    grid-template-rows: repeat(4, 120px);
    gap:10px;
}

.box{
    display:flex;
    padding-left:5px;
    font-size:30px;
    font-weight:bold;
    color:black;
}

.box1{
    background:rgb(178,20,46);
    grid-column: span 2;
    grid-row: span 2;
}

.box2{
    background:orange;
    grid-column: span 2;
}

.box3{
    background:rgb(162, 46, 162);
}

.box4{
    background:grey;
}

.box5{
    background:grey;
}

.box6{
    background:rgb(63, 211, 52);
    grid-row: span 2;
}

.box7{
    background:rgb(79, 79, 218);
    grid-column: span 2;
    grid-row: span 2;
}

.box8{
    background:rgb(185, 33, 185)
}