: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; 
    /* 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"
    "main main main main main main"
    "content1 content1 content1 content1 content2 content2"
    "footer footer footer footer footer footer";
    /* text-align: center; */
    padding-left: 150px;
    padding-right: 150px;
    text-align: center;
}

#content1, #content2, #footer
{
background-color: rgba(246, 238, 209, 0.8); 
line-height: 1.5;
border: var(--show-grid);
}
 
#content1 {
    padding-left:20px;
}
  

@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 {
    padding: 0px;
    line-height: 1;
    /* border: solid rgb(240, 14, 14); */
    }
    
    #content2 .general-info{
        text-align:center;
    }
    

    .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"
    "footer";
    padding-left: 0px;
    padding-right: 0px;
    } 

}