/* VARIABLES */

:root {

    --mobileMargin: 10%;

    --tabletMargin: 10%;

    --desktopMargin: 5%;

}

/* 320 */ 

@media screen and (min-width: 20em) {
    
    .accessibility {

        text-align: center;

        margin-top: 10%;      
    
    }

    .accessibility img {

        margin-top: var(--mobileMargin);

    }

}

/* 480 */

@media screen and (min-width: 30em)  {

    .accessibility img {

        margin-top: var(--tabletMargin);

    }


}

/* 1280 */

@media screen and (min-width: 80em) {

    .accessibility img {

        margin-top: var(--desktopMargin);

    }
 
}

/* 1920 */

@media screen and (min-width: 120em) {

    .mainContainer {

        margin: 0 auto 0 auto;

    }

    .sectionContainer {

        margin: 0 auto;

    }

    .sectionHeader, .digitalWireframes, .usabilityStudy, .mockups {

        margin-top: var(--tabletMargin) ;

    }

    .sectionContent  {

        margin-top: var(--desktopMargin);

    }

    .wireframes {

        margin-top: var(--tabletMargin)

    }

    #digitalOne {

        width: 40%;

    }

    #digitalTwo {

        width: 42%;

    }

    .userResearch img, .painPoints img, .persona img, .journeyMap img, .paperWireframes img {


        margin-top: var(--desktopMargin);


    }

    .usabilityStudy img {
       
        width: 70%;

        margin-top: 2%;

    }

    .mockups p {

        margin-top: var(--desktopMargin);

    }
    
    .nextStepsContainer, .contactContainer {

        margin-top: var(--desktopMargin);

    }

}

@media screen and (min-width: 200em) {

    .accessibility img {

        width: 60%;

    }

    
}