#wrapper {  /*main grid */  
    display: grid;
    margin: 0 auto;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(20px, max-content);
    grid-gap: 0.5rem;
    grid-template-areas:
    "header"
    "main"
    "footer";
}

/*++++++ Define grid areas for Wrapper START +++++*/
header { 
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(20px, max-content);
    background-color: #fff;
    width: 100%;
    z-index: 3;
    grid-template-areas:
    "nav"
    "important";
  }

  main {
    grid-area: main;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(20px, max-content);
    grid-gap: 1rem;
    padding: 0rem 0.5rem;
    grid-template-areas: 
    "article-right"
    "article-left";
}

footer {
    grid-area: footer;
}

/*++++++ Define grid areas for Wrapper END +++++*/


/*++++++ Define grid areas for Header START +++++*/

  nav{
     grid-area: nav;
     display: grid;
     grid-template-columns: auto 10fr 1fr;
     grid-template-rows: 50px;
     grid-auto-rows: max-content; 
     grid-template-areas:
     "logo . icon"
     "menu menu menu";
  }

  #important{
    grid-area: important;
    background: url(../images/backdrop.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}
/*++++++ Define grid areas for Header END +++++*/


/*++++++ Define grid areas for Main START +++++*/
  .article-right{
    grid-area: article-right;
    padding: 1rem;
    border: black 1px solid;
    border-radius: 1rem;
}

  .article-left{
    grid-area: article-left;
    display: grid;
    width: 100%;
    grid-auto-rows: minmax(20px, max-content);
    grid-gap: 0.5rem;
    margin: 0;
    grid-template-areas: 
    "section-top"
    "section-bottom";
}

/*++++++ Define grid areas for Main END +++++*/

/*++++++ Define grid areas for Nav START +++++*/
  
  .logo {
    grid-area: logo;
  }

  .menu-icon{
    grid-area: icon;
}

  .menu{
    grid-area: menu;
    background-color: rgb(187, 184, 184);
}

/*++++++ Define grid areas for Nav END +++++*/

/*++++++ Define grid areas for Article left START +++++*/

.section-bottom{
    grid-area: section-bottom;
    border: rgb(0, 0, 0) 1px solid;
    border-radius: 1rem;
    background-color: rgb(16, 108, 214);
    color: white;

}

.section-top{
    grid-area: section-top;
    border: black 1px solid;
    border-radius: 1rem;
    background-color: rgb(233, 99, 45);
    color: aliceblue;
}

/*++++++ Define grid areas for Article left END +++++*/
 
/*=======END DEFINE GRID AREAS=======*/

aside {
    display: none;
}

#bottom-logos {  
    display: none;
}