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

:root {
    --h1: 60px;
    --h2: 48px;
    --h3: 36px;
    --h4: 26px;
    --p: 18px;
    --pixel-18-16: 16px;
    --section-padding-lg: 100px;
    --section-padding: 50px;
    --section-padding-sm: 30px;
    --section-padding-xsm: 20px;
    --hero-heading: 72px;
    --pixel-28-22: 22px;
    --pixel-32-25: 25px;
}


@media screen and (min-width: 480px) {
  :root {
        --h1: calc(60px + ((100vw - 480px) / (1200 - 480)) * (72 - 60) );
        --h2: calc(48px + ((100vw - 480px) / (1200 - 480)) * (60 - 48) );
        --h3: calc(36px + ((100vw - 480px) / (1200 - 480)) * (45 - 36) );
        --h4: calc(26px + ((100vw - 480px) / (1200 - 480)) * (36 - 26) );
        --p: calc(18px + ((100vw - 480px) / (1200 - 480)) * (22 - 18) );
        --pixel-18-16: calc(16px + ((100vw - 480px) / (1200 - 480)) * (18 - 16) );
        --section-padding-lg: calc(100px + ((100vw - 480px) / (1200 - 480)) * (125 - 100) );
        --section-padding: calc(50px + ((100vw - 480px) / (1200 - 480)) * (75 - 50) );
        --section-padding-sm: calc(30px + ((100vw - 480px) / (1200 - 480)) * (45 - 30) );
        --section-padding-xsm: calc(20px + ((100vw - 480px) / (1200 - 480)) * (25 - 20) );
        --hero-heading: calc(72px + ((100vw - 480px) / (1200 - 480)) * (96 - 72) );
        --pixel-28-22: calc(22px + ((100vw - 480px) / (1200 - 480)) * (28 - 22) );
        --pixel-32-25: calc(25px + ((100vw - 480px) / (1200 - 480)) * (32 - 25) );
    }
}


@media screen and (min-width: 1200px) {
  :root {
        --h1: 72px;
        --h2: 60px;
        --h3: 45px;
        --h4: 36px;
        --p: 22px;
        --pixel-18-16: 18px;
        --section-padding-lg: 125px;
        --section-padding: 75px;
        --section-padding-sm: 45px;
        --section-padding-xsm: 25px;
        --hero-heading: 96px;
        --pixel-28-22: 28px;
        --pixel-32-25: 32px;
    }
}
