*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

/* first contianer */
.container{
    background-color: grey;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    height: 80vh;
    margin: 100px 200px;
    padding: 2rem;
}
.box{
    background-color: yellow;
    
    
}
.box-1{
    background-color: green;
}



@media (max-width:576px){
    .container{
      grid-template-columns: repeat(1, 1fr);
      margin: 50px 50px;
    }
    .box{
        grid-column: auto;
        grid-row: auto;
    }
}
/* second container */
.container-2{
    background-color: grey;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3rem;
    height: 80vh;
    margin: 100px 200px;
    padding: 2rem;
}

.container-2 > .box-1{
    grid-column: 1/3;
    /* grid-row: 1/3; */
}

.container-2 >.box-3{
    grid-row: 1/4;
    grid-column:3/4 ;
}

@media (max-width:576px){
    .container-2{
      grid-template-columns: repeat(1, 1fr);
      margin: 50px 50px;
    }
    .container-2 > .box-1, .box-2{
        grid-column: auto;
        grid-row: auto;
        /* background-color: blue; */
    }
}
/* third container */
.container-3{
    background-color: grey;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3rem;
    height: 80vh;
    margin: 100px 200px;
    padding: 2rem;
}

.container-3 > .box-1{
    grid-column: 1/5;
}
.container-3 >.box-3{
    grid-column: 2/5;
}

.container-3 > .box-4{
    grid-column: 1/5;
}

@media (max-width:576px){
    .container-3{
      grid-template-columns: repeat(1, 1fr);
      margin: 50px 50px;
    }
    .container-3 > .box-1, .box-3, .box-4{
        grid-column: auto;
        grid-row: auto;
        /* background-color: blue; */
    }
}

/* fourth container */

.container-4{
    background-color: grey;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3rem;
    height: 80vh;
    margin: 100px 200px;
    padding: 2rem;
}

.container-4 > .box-1{
    grid-column: 1/3;
}

.container-4 > .box-2{
    grid-column: 3/5;
}

.container-4 > .box-4{
    grid-column: 2/5;
}
.container-4 > .box-5{
    grid-column: 1/5;
}


@media (max-width:576px){
    .container-4{
      grid-template-columns: repeat(1, 1fr);
      margin: 50px 50px;
    }
    .container-4 > .box-1, .box-2, .box-4, .box-5{
        grid-column: auto;
        grid-row: auto;
        /* background-color: blue; */
    }
}
/* conainer 5 */
.container-5{
    background-color: grey;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3rem;
    height: 80vh;
    margin: 100px 200px;
    padding: 2rem;
}

@media (max-width:576px){
    .container-5{
      grid-template-columns: repeat(1, 1fr);
      margin: 50px 50px;
    }
    .container-5 > .box{
        grid-column: auto;
        grid-row: auto;
        /* background-color: blue; */
    }
}

/* conainer 6 */
.container-6{
    background-color: grey;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 3rem;
    height: 80vh;
    margin: 100px 200px;
    padding: 2rem;
}

.container-6 >.box-1{
    grid-column: 1/3;
}

.container-6 >.box-7{
    grid-column: 1/3;
    grid-row: 3/5;
    background-color: tomato;
}

.container-6 >.box-11{
    grid-column: 1/4;
    /* grid-row: 3/5; */
    background-color: lightcoral;
}

@media (max-width:576px){
    .container-6{
      grid-template-columns: repeat(1, 1fr);
      margin: 50px 50px;
    }
    .container-2 > .box-1, .box-7, .box-11{
        grid-column: auto;
        grid-row: auto;
        /* background-color: blue; */
    }
}

/* conainer 7 */
.container-7{
    background-color: grey;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 3rem;
    height: 80vh;
    margin: 100px 200px;
    padding: 2rem;
}

.container-7 > .box-1{
    grid-column: 1/3;
}

.container-7 > .box-2{
    grid-column: 3/6;
}

.container-7 > .box-3{
    grid-column: 1/3;
    grid-row: 2/6;
}

.container-7 > .box-4{
    grid-column: 3/6;
    grid-row: 2/6;
    background-color: #47bae0;
    display: grid;
    gap: 3rem;
    padding: 4rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);

}

.container-7 > .box-4 span{
    background-color: white;
}

.container-7 > .box-4 .span-box-1{
   grid-column: 1/3;
   
}

.container-7 > .box-4 .span-box-4{
    /* background-color: blue;
    border: 1px solid red;
    padding: 30px; */
}

@media (max-width:576px){
    .container-7{
      grid-template-columns: repeat(1, 1fr);
      margin: 50px 50px;
    }
    .container-2 > .box-1, .box-2, .box-3, .box-4{
        grid-column: auto;
        grid-row: auto;
        /* background-color: blue; */
    }
}
/* contaier 8 */
.container-8{
    background-color: grey;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3rem;
    height: 80vh;
    margin: 100px 200px;
    padding: 2rem;
}

.container-8 > .box-8{
    grid-column: 3/6;
    background-color: tomato;
}

.container-8 > .box-9{
    grid-column: 1/6;
    background-color: orange;
}

@media (max-width:576px){
    .container-8{
      grid-template-columns: repeat(1, 1fr);
      margin: 50px 50px;
    }
    .container-8 > .box-8, .box-9{
        grid-column: auto;
        grid-row: auto;
        /* background-color: blue; */
    }
}
/* contaier 9 */
.container-9{
    background-color: grey;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3rem;
    height: 80vh;
    margin: 100px 200px;
    padding: 2rem;
}

.container-9 > .box-1{
    grid-column: 1/4;
    
}

.container-9 > .box-2{
   grid-row: 2/4;
   background-color: rgb(8, 91, 63);
    
}

.container-9 > .box-3{
    grid-column: 2/4;
    background-color: rgb(23, 43, 172);
    
     
 }

 @media (max-width:576px){
    .container-9{
      grid-template-columns: repeat(1, 1fr);
      margin: 50px 50px;
    }
    .container-2 > .box-1, .box-2, .box-3{
        grid-column: auto;
        grid-row: auto;
        /* background-color: blue; */
    }
}