/*====================================================================*/
/*===========================  Responsive Layout =====================*/
/*====================================================================*/
/*               Note:  layout not listed are per HTML flow           */

/*        ---------------------------------    1
          |       header                   |
          |--------------------------------|   2
          |        hero img                |
          |--------------------------------|   3
          |           |                    |
          |           |    main (intro)    |
          |  aside    |--------------------|   4
          |  (news)   |     whats-inside   |
          |           |                    |
          |--------------------------------|   5
          |           dual-video           |
          |--------------------------------|   6
          |             footer             |
          ---------------------------------    7                        
          1           2                    3
*/
/***********************
      Desktop Range  
************************/
@media (min-width: 768px){
    #wrapper        {   display: grid;
                        grid-template-columns: 1.5fr 2fr;           }

    header          {   grid-row: 1 / 2;    grid-column: 1 / 3;     }
    #hero-pic       {   grid-row: 2 / 3;    grid-column: 1 / 3;     }
    aside           {   grid-row: 3 / 5;    grid-column: 1 / 2;     }
    main            {   grid-row: 3 / 4;    grid-column: 2 / 3;     }
    #whats-inside   {   grid-row: 4 / 5;    grid-column: 2 / 3;     }
    #dual-video     {   grid-row: 5 / 6;    grid-column: 1 / 3;     }
    footer          {   grid-row: 6 / 7;    grid-column: 1 / 3;     }

} /* end of desktop layout section  */