:root {
  /* --show-grid: solid black; */
  --show-grid: 0px;
}

.img-hp {
	width: 95%;
	/* max-width: 600px; */
	height: auto;

}

.img-s {
	width: 95%;
	/* max-width: 380px; */
	height: auto;

}
.img-su {
  padding-top:30px;
  width: 95%;
	
	height: auto;
}


li {
  list-style-type:circle;
}
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    /* grid-template-rows: 80px 1fr 1fr 1fr 1fr 1fr; */
    grid-template-rows: 80px;
    /* place-items: center; */
    /* justify-items: center; */

    grid-template-areas:
      "nav nav nav nav nav nav nav nav nav nav nav nav"
      "main main main main main main main main main main main main"
      "content1 content1 content1 content1 content1 content2 content2 content2 content2 content2 content2 content2"
      "content3 content3 content3 content3 content3 content3 content3 content3 content3 content3 content3 content3"
      "content4 content4 content4 content4 content5 content5 content5 content5 content6 content6 content6 content6"
      "content7 content7 content7 content7 content7 content7 content8 content8 content8 content8 content8 content8"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
    /* text-align: center; */
    padding-left: 150px;
    padding-right: 150px;
    text-align: center;
}

#content1, #content2, #content3, #content4, #content5, #content6, #content7, #content8, #footer
{
  background-color: rgba(246, 238, 209, 0.8); 
  line-height: 1.5;
  border: var(--show-grid);
}


#content1 {
  padding: 0px;
}


@media only screen and (max-width: 1268px) {
  /* ipad/small laptop */ 

  .container {
    padding-left: 20px;
    padding-right: 20px;
  } 
}



@media only screen and (max-width: 768px) {
    
    #content1, #content2, #content3 {
      padding: 0px;
      line-height: 1;
    }
    
    /* #content2 h3,h4{
      text-align:center;
    } */
    #content4,#content5,#content6{
      padding-top: 5px;
      font-size:medium;
      line-height: 1;
    }

    .container {
      grid-template-columns: 1fr;
      /* grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr; */
      grid-template-areas:
      "nav"
      "main"
      "content1"
      "content2"
      "content3"
      "content4"
      "content5"
      "content6"
      "content7"
      "content8"
      "footer";
      padding-left: 0px;
      padding-right: 0px;
    } 

}