/* Very Large Screen */
:root {
    --section-width: 1150px;

    --half-padding: calc((100vw - 1217px) / 2);

    --font-50: 50px;
    --font-45: 45px;
    --font-36: 36px;
    --font-24: 24px;
    --font-22: 22px;
    --font-20: 20px;
    --font-18: 18px;
    --font-16: 16px;
    --font-14: 14px;
}

/* Large Screen */
@media all and (max-width: 1200px) { 
    :root {
        --section-width: 930px;

        --half-padding: calc((100vw - 1017px) / 2);

        --font-50: 48px;
        --font-45: 43px;
        --font-36: 34px;
        --font-24: 22px;
        --font-22: 20px;
        --font-20: 18px;
        --font-18: 17px;
        --font-16: 15px;
        --font-14: 13px;
    }
}

/* Medium Screen */
@media all and (max-width: 992px) {  
    :root {  

        --section-width: 580px;

        --half-padding: calc((100vw - 817px) / 2);

        --font-50: 46px;
        --font-45: 41px;
        --font-36: 32px;
        --font-24: 21px;
        --font-22: 19px;
        --font-20: 17px;
        --font-18: 16px;
        --font-16: 14px;
        --font-14: 12px;
    }
}

/* Small Screen */
@media all and (max-width: 600px) {  
    :root {
        --section-width: calc(100vw - 50px);
        --half-padding: 25px;
        
        --font-50: 44px;
        --font-45: 39px;
        --font-36: 30px;
        --font-24: 20px;
        --font-22: 17px;
        --font-20: 16px;
        --font-18: 15px;
        --font-16: 14px;
        --font-14: 12px;
    }
}




/* xlarge */
@media all and (min-width: 1200px) {
    .show-under-large {
        display: none !important;
    }
    .show-on-small {
        display: none !important;
    }
    .show-under-xlarge {
        display: none !important;
    }
}

/* large */
@media all and (min-width: 992px) and (max-width: 1200px) {
    .show-under-large {
        display: none !important;
    }
    .show-on-small {
        display: none !important;
    }
    .hide-under-xlarge {
        display: none !important;
    }
}

/* small */
@media all and (min-width: 600px) and (max-width: 992px) {
    .show-on-small {
        display: none !important;
    }
    .hide-under-large {
        display: none !important;
    }
    .hide-under-xlarge {
        display: none !important;
    }
}

@media all and (max-width: 600px) {
    .hide-on-small {
        display: none !important;
    }
    .full-on-small {
        width: 100% !important;
    }
    .hide-under-large {
        display: none !important;
    }
    .hide-under-xlarge {
        display: none !important;
    }
    .reverse-on-mobile {
        display: flex;
        flex-direction: column-reverse;
    }
}