p {font-size:14px;}
.header {
         padding:40px;
         height:45vh;
         background-image:linear-gradient(lightgrey, white);
         margin:0px 0px;}

h1{font-family:"Century Gothic";
   margin:0;}

.container {
  text-align:center;
  margin:0 auto;
  width:90vw;
  height:250vh;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "Main1 Main1 side1 side1"
    "Main1 Main1 side1 side1"
    "Main2 Main2 Main2 Main2"
     "Main2 Main2 Main2 Main2"
   
}
.side1 { grid-area: side1; }
.side2 { grid-area: side2; }
.side3 { grid-area: side3; }
.side4 { grid-area: side4;}
.Main1 { grid-area: Main1; }
.Main2 { grid-area: Main2; }

.side1 .side2 .side3 { max-height:33vh;
max-width:50vw;
overflow:hidden;
object-fit:cover;}

.pic {   max-width:;
         overflow:hidden;
         object-fit:cover;
}

.caption {
  z-index:2;
 background-color:rgba(255, 255, 255, 0.8);
  height:40px;
}

body, html {width:100%;
      margin:0;}

@media (max-width: 1040px) {
  .container {
    width:85vw;
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; 
  gap: 0px 0px; 
grid-template-areas: 
    "Main1"
    "Main2"
    "side1"
    "side2"
    "side3"
    "side4";
}

.Main1 { grid-area: Main1; }
.Main2 { grid-area: Main2; }
.side1 { grid-area: side1; }
.side2 { grid-area: side2; }
.side3 { grid-area: side3; }
.side4 {grid-area:side4;}

  
  body {}
}