/* === FLUID SIZES === */

:root {
    --h1: 50px;
    --h2: 36px;
    --h3: 30px;
    --h4: 20px;
    --72-50: 50px;
    --55-45: 45px;
    --42-30: 30px;
    --32-26: 26px;
    --28-22: 22px;
    --26-20: 20px;
    --14-22: 14px;
    --section-padding-large: 100px;
    --section-padding: 50px;
    --section-padding-small: 37px;
}


@media screen and (min-width: 480px) {
  :root {
        --h1: calc(50px + ((100vw - 480px) / (1200 - 480)) * (64 - 50) );
        --h2: calc(36px + ((100vw - 480px) / (1200 - 480)) * (42 - 36) );
        --h3: calc(30px + ((100vw - 480px) / (1200 - 480)) * (36 - 30) );
        --h4: calc(20px + ((100vw - 480px) / (1200 - 480)) * (25 - 20) );
        --72-50: calc(50px + ((100vw - 480px) / (1200 - 480)) * (72 - 50) );
        --55-45: calc(45px + ((100vw - 480px) / (1200 - 480)) * (55 - 45) );
        --42-30: calc(30px + ((100vw - 480px) / (1200 - 480)) * (42 - 30) );
        --32-26: calc(26px + ((100vw - 480px) / (1200 - 480)) * (32 - 26) );
        --28-22: calc(22px + ((100vw - 480px) / (1200 - 480)) * (28 - 22) );
        --26-20: calc(20px + ((100vw - 480px) / (1200 - 480)) * (26 - 20) );
        --14-22: calc(14px + ((100vw - 480px) / (1200 - 480)) * (22 - 14) );
        --section-padding-large: calc(100px + ((100vw - 480px) / (1200 - 480)) * (125 - 100) );
        --section-padding: calc(50px + ((100vw - 480px) / (1200 - 480)) * (75 - 50) );
        --section-padding-small: calc(37px + ((100vw - 480px) / (1200 - 480)) * (60 - 37) );
    }
}


@media screen and (min-width: 1200px) {
  :root {
        --h1: 64px;
        --h2: 42px;
        --h3: 36px;
        --h4: 25px;
        --72-50: 72px;
        --55-45: 55px;
        --42-30: 42px;
        --32-26: 32px;
        --28-22: 28px;
        --26-20: 26px;
        --14-22: 22px;
        --section-padding-large: 125px;
        --section-padding: 75px;
        --section-padding-small: 60px;
    }
}