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

:root {
    --h1: 60px;
    --h2: 48px;
    --h3: 32px;
    --h4: 24px;
    --p: 17px;
    --padding: 45px;
    --padding-m: 60px;
    --padding-l: 75px;
    --pixel-75-40: 40px;
    --pixel-25-20: 20px;
    --pixel-19-16: 16px;
    --hero: 75px;
    --pixel-22-19: 18px;
}


@media screen and (min-width: 480px) {
  :root {
        --h1: calc(60px + ((100vw - 480px) / (1200 - 480)) * (85 - 60) );
        --h2: calc(48px + ((100vw - 480px) / (1200 - 480)) * (65 - 48) );
        --h3: calc(32px + ((100vw - 480px) / (1200 - 480)) * (45 - 32) );
        --h4: calc(24px + ((100vw - 480px) / (1200 - 480)) * (35 - 24) );
        --p: calc(17px + ((100vw - 480px) / (1200 - 480)) * (20 - 17) );
        --padding: calc(45px + ((100vw - 480px) / (1200 - 480)) * (75 - 45) );
        --padding-m: calc(60px + ((100vw - 480px) / (1200 - 480)) * (100 - 60) );
        --padding-l: calc(75px + ((100vw - 480px) / (1200 - 480)) * (125 - 75) );
        --pixel-75-40: calc(40px + ((100vw - 480px) / (1200 - 480)) * (75 - 40) );
        --pixel-25-20: calc(20px + ((100vw - 480px) / (1200 - 480)) * (25 - 20) );
        --pixel-19-16: calc(16px + ((100vw - 480px) / (1200 - 480)) * (19 - 16) );
        --hero: calc(75px + ((100vw - 480px) / (1200 - 480)) * (150 - 75) );
        --pixel-22-19: calc(18px + ((100vw - 480px) / (1200 - 480)) * (22 - 18) );
    }
}


@media screen and (min-width: 1200px) {
  :root {
        --h1: 85px;
        --h2: 65px;
        --h3: 45px;
        --h4: 35px;
        --p: 20px;
        --padding: 75px;
        --padding-m: 100px;
        --padding-l: 125px;
        --pixel-75-40: 75px;
        --pixel-25-20: 25px;
        --pixel-19-16: 19px;
        --hero: 150px;
        --pixel-22-19: 22px;
    }
}