<section class="grid-container">
  <div class="product_front"></div>
  <div class="jumbo"></div>
  <div class="full-length"></div>
  <div class="highlight"></div>  
  <div class="product_top"></div>
  <div class="description"></div>
</section> 

/*
based on this dribbble post: https://dribbble.com/shots/4386670-Daily-Ui-004-Camera-Landing-Page-Thumb/attachments/998296
*/

body { 
  margin: 0; 
  font-family: Courier New;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: 800px 600px 600px 1600px;
  grid-template-areas:
  "pf pf pf pf pf pf pf ju ju ju ju ju ju"
  "fl fl fl fl fl fl fl fl fl fl fl fl fl"
  "hi hi hi hi hi hi pt pt pt pt pt pt pt"
  "de de de de de de de de de de de de de";
}
.product_front {
  grid-area: pf;
  background-image: url(https://storage.googleapis.com/jeffastor/minicam-1.png);
  background-size: 100% 100%;
}
.jumbo {
  grid-area: ju;
}
.full-length {
  grid-area: fl;
}
.highlight {
  grid-area: hi;
}
.product_top {
  grid-area: pt;
  background-image: url(https://storage.googleapis.com/jeffastor/minicam-2.png);
  background-size: 100% 100%;
/*   background-size: cover; */
}
.description {
  grid-area: de;
}