.black{
  background-color: #2c3043;
}
.red{
  background-color:#fc6057;
}
.dark-orange{
  background-color:#fd825c;
}
.light-orange{
  background-color: #fda061 ;
}
.dark-green{
  background-color:#01a787;
}
.normal-green{
  background-color: #1bc1a1;
}
.light-green{
  background-color: #34daba;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  justify-items: center;
}
.main-container{
  border: 2px solid ;
  height: 100vh;
  width: 100vw;
    display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,1fr);
   align-self: center;
   gap: 20px;
   padding: 20px;
}
.child{
  /* border: 1px solid black; */
}
/* child-continer-1 */
#child-container-1{
  /* border: 1px solid red; */
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(2,1fr);
  padding: 15px 10px;
  gap: 10px;
}
/* child-conatiner-2 */
#child-Container-2{
  display: grid;
  padding: 15px 10px;
  gap: 10px;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(2,1fr);
}
#box-1{
  grid-column: 1/3;
}
#box-3{
  grid-row: 1/3  ;
  grid-column: 3/4;
}
/* child-container-3 */
#child-container-3{
  display: grid;
  padding: 15px 10px;
  row-gap:8px ;
  column-gap: 10px;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows:1fr 2fr 1fr;
}
.box-3-1{
  grid-column: 1/4;
}
.box-3-3{
  grid-column: 2/4;
}
/* child-container-4 */
#child-container-4{
  display: grid;
  padding: 15px 10px;
  column-gap: 10px;
  row-gap: 5px;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 2fr 3fr 1fr;
  /* grid-template-columns: 120px 50px 180px;
  grid-template-rows: 2fr 3fr 1fr; */
}
.box-4-1{
  grid-column: 1/3;
}
.box-4-2{
  grid-column: 3/6;
}
.box-4-4{
  grid-column: 2/6;
}
.box-4-5{
  grid-column: 1/6;
}
/* child-container-5 */
#child-container-5{
  display: grid;
  padding: 15px 10px;
  gap: 10px;
  grid-template-columns: repeat(6,1fr);
  grid-template-rows: repeat(3,1fr);
}
/* child-contaienr-6 */
#child-container-6{
  display: grid;
  padding: 15px 10px;
  /* column-gap: 10px; */
  gap: 5px;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(5,1fr);
}
.box6-1{
grid-column: 1/3;
}
.box6-7{
 grid-column: 1/3;
 grid-row: 3/5;
}
.box6-10{
  grid-column: 3/4;
}
.box6-11{
 grid-column: 1/4;
}
/* child-container-7 */
#child-container-7{
  display: grid;
  padding: 15px 10px;
  column-gap: 10px;
  row-gap: 5px;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(4,1fr);
}
.g7{
grid-row: 2/5;
}
#box7-3{

}
#box7-4{
    display: grid;
  padding: 10px ;
  gap: 10px 15px;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat();
}
.lg7-4-1{
  grid-column: 1/3;
}
/* child-contianer-8 */
#child-container-8{
  display: grid;
  padding: 15px 10px;
  gap: 10px;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: repeat(3,1fr);
}
.box8-8{
  grid-column: 3/6;
}
.box8-9{
  grid-column: 1/6;
}
/* child-contianer-9 */
#child-container-9{
  display: grid;
  padding: 15px 10px;
  gap: 10px;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,1fr);
}
.box9-1{
  grid-column: 1/4;
}
.box9-2{
  grid-column: 1/2;
  grid-row: 2/4;
}
.box9-3{
  grid-column: 2/4;
}

@media (max-width:1000px) {
  .main-container{
 grid-template-columns: repeat(2,1fr);
 gap: none;
 padding: none;
 /* grid-template-rows: repeat(auto); */
}  
}
@media(max-width:800px){
  .main-container{
    grid-template-columns: repeat(1,1fr);
    gap: none;
    /* grid-template-rows: repeat(auto); */
  }
}

/* resonsive */

/*  For tablets  */
@media (max-width: 1100px) {
  .main-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*  For mobile  */
@media (max-width: 700px) {
  .main-container {
    grid-template-columns: 1fr; /* only one box per row */
  }
  .main-container {
    padding: 10px;
    row-gap: 5px;
    column-gap: 5px;
  }
}