@media only screen and (min-width: 960px) {
    /*! styles for browsers larger than 960px; */
    .view {
        grid-template-areas: 
        "head head head head head head"
        "head head head head head head"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux"
        "nav  main main main aux  aux" 
        "nav  foot foot foot aux  aux";
    }

    .main {
        min-width: 700px;
    }

}
@media only screen and (min-width: 1440px) {
    /*! styles for browsers larger than 1440px; */
}
@media only screen and (min-width: 2000px) {
    /*! for sumo sized (mac) screens */
}

@media only screen and (max-width: 480px) {

    /*! styles for mobile browsers smaller than 480px; (iPhone) */
        .view {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr 1.2fr 0.8fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            gap: 0px 0px;
        }
    
        .head {
            grid-area: 1 / 1 / 3 / 7;
        }
    
        .main {
            grid-area: 3 / 1 / 18 / 5;
        }
    
        .alt {
            grid-area: 3 / 5 / 18 / 7;
        }
    
        .foot {
            grid-area: 19 / 1 / 20 / 7;
        }
    
        .nav {
            grid-area: 18 / 1 / 20 / 7;
        }

    .alternate {
        padding-top: 15px;
        font-size: 18px;
        display: none;
    }

    footer {
        display: inline;
        max-height: 0px;
    }
}




@media only screen and (device-width: 768px) {
   /*! default iPad screens */
}
/*! different techniques for iPad screening */
@media only screen and (min-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /*! For portrait layouts only */
}

@media only screen and (min-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /*! For landscape layouts only */
}