/* ----------- LAYOUT TEMPLATE -------------*/

body.main-grid {
  display: grid;
/*  padding-bottom: 10px;*/
  min-height: 100vh;
  height: 2000px;
  background-color: #ffffff;
  grid-template-areas:
    'header'
    'main'
    'aside'
    'aside-1'
    'section'
    'aside-2'
    'footer';
/*  grid-template-columns: 1fr;*/

  grid-template-rows: auto;
  /*
  grid-row-gap: 10px;
  grid-column-gap: 10px;
*/
}

.container-grid {
  margin-right: 0;
  margin-left: 0;
  padding-top: 20px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #F0F3CA;

}

.container-grid.header {
  grid-area: header;
  z-index: 10;
/*  min-height: 250px;*/
/*  height: 100%;*/
  opacity: 0.9;
  
}


.container-grid.main {
  grid-area: main;
  z-index: 9;
/*
  min-height: 800px;
  max-height: 800px;
*/
}

.container-grid.aside {
  grid-area: aside;
  z-index: 8;
/*
  min-height: 800px;
  max-height: 800px;
  overflow: hidden;
*/
}


.wrapper-product:last-child:nth-child(3n - 2) {
  grid-column: span 3;
}

.container-grid.aside-1 {
  grid-area: aside-1;
  z-index: 7;
/*  height: 1200px;*/
/*  max-height: 1400px;*/
/*  overflow: hidden;*/
}

.container-grid.aside-2 {
  z-index: 6;
  grid-area: aside-2;
  margin: 0;
  padding: 0;
/*  height: 15%;*/
}

.container-grid.section {
  grid-area: section;
  z-index: 5;
}


.container-grid.footer {
  grid-area: footer;
  z-index: 4;
  padding: 0;
}




/* ----------- Screens -------------*/

@media screen and (min-width: 36rem) {
  /* Layout Elements */

  body.main-grid {

    grid-template-areas:
      'header header'
      'main main'
      'aside aside'
      'aside-1 aside-1'
      'section section'
      'aside-2 aside-2'
      'footer footer';
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
  }

  /* ----------- Header Screen -------------*/
   /* ----------- Main Screen -------------*/
  /* ----------- Aside 1 Screen-------------*/
  /* ----------- Aside 2 Screen -------------*/
  /* ----------- Footer  Screen-------------*/

  
  }

@media screen and (min-width: 48rem) {
  /*     Layout Elements */

  
  /*
  body.main-grid {
    grid-template-areas:
      'header header'
      'main aside-1'
      'main aside-1'
      'main aside-2'
      'footer footer';
    grid-template-columns: 3fr 2fr;
  }
*/

  /* ----------- Header Screen -------------*/


  /* ----------- Main Screen -------------*/
  /* ----------- Aside 1 Screen-------------*/
  /* ----------- Aside 2 Screen -------------*/
  /* ----------- Footer  Screen-------------*/
}

@media screen and (min-width: 75rem) {
  /*   Layout Elements */
/*

  body.main-grid {
    grid-template-areas:
      'header header'
      'aside main'
      'aside main'
      'aside-1 aside-1'
      'aside-2 section'
      'aside-2 section'
      'footer footer';
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto;
  }
*/
  
   .container-grid.header {
  min-height: 650px;
/*  height: 100vh;*/

}

}