/*-----------------------------------------------*/
/*  Site Responsiveness                          */
/*-----------------------------------------------*/

/* Extra large screens (min-width: 1201px)
 * accomodate from tablets-up for one style*/

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

    .striporstack {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

}

/* iPads and Tablets */

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

    .striporstack {
        flex-direction: column;
    }

    main, header, footer {
        grid-template-columns: 40px 1fr 40px;
    }
}

/* Mobile Devices, Phones */

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

    main, header, footer {
        grid-template-columns: 20px 1fr 20px;
    }
}