/* grid styles */

 .container {
     display: -ms-grid;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(15.625em, 1fr));
     grid-gap: 2em;
     /* the repeat() function takes two arguements: the number of column tracks, & the track width. In this instance, the min track width has been set to 15.625em, and the max track width has been set to 1 calculated fraction unit. */
     padding-bottom: 1em;
     padding-top: 1.2em;
 }

 /* custom containers */

 .nav-container {
    display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     padding: 1.7em;;
 }

 .footer-container {
     flex-direction: row;
     display: -webkit-flex;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     margin-top: 1em;
 }
 

 /* body content wrapper & whitespace*/

 html,
 body {
     height: 100%;
     max-width: 1800px;
     margin: 0 auto;
     display: flex;
	 flex-direction: column;
 }

 .wrapper {
     margin: 0 1.5em 0 1.5em;
     flex: 1 0 auto;

 }
 
 @media only screen and (min-width: 750px) {
 	.footer-container {  
 		justify-content: space-between;
 	}
 }

 @media only screen and (min-width: 1025px) {

     .wrapper {
         margin: 0 10em 0 10em;
     }
     .nav-container {
         padding: 1em 11em 0 10em;
     }
     .footer-container {
         padding: 0 9em 0 9em;
     }
 }