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

:root {
    --h1: 48px;
    --h2: 37px;
    --h3: 26px;
    --h4: 20px;
    --p: 17px;
    --pixel-38-30: 30px;
    --pixel-25-21: 21px;
    --section-padding: 50px;
    --section-padding-large: 70px;
    --section-padding-small: 37px;
}


@media screen and (min-width: 480px) {
  :root {
        --h1: calc(48px + ((100vw - 480px) / (1200 - 480)) * (60 - 48) );
        --h2: calc(37px + ((100vw - 480px) / (1200 - 480)) * (45 - 37) );
        --h3: calc(26px + ((100vw - 480px) / (1200 - 480)) * (32 - 26) );
        --h4: calc(20px + ((100vw - 480px) / (1200 - 480)) * (25 - 20) );
        --p: calc(17px + ((100vw - 480px) / (1200 - 480)) * (18 - 17) );
        --pixel-38-30: calc(30px + ((100vw - 480px) / (1200 - 480)) * (38 - 30) );
        --pixel-25-21: calc(21px + ((100vw - 480px) / (1200 - 480)) * (25 - 21) );
        --section-padding: calc(50px + ((100vw - 480px) / (1200 - 480)) * (75 - 50) );
        --section-padding-large: calc(70px + ((100vw - 480px) / (1200 - 480)) * (100 - 70) );
        --section-padding-small: calc(37px + ((100vw - 480px) / (1200 - 480)) * (60 - 37) );
    }
}


@media screen and (min-width: 1200px) {
  :root {
        --h1: 60px;
        --h2: 45px;
        --h3: 32px;
        --h4: 25px;
        --p: 18px;
        --pixel-38-30: 38px;
        --pixel-25-21: 25px;
        --section-padding: 75px;
        --section-padding-large: 100px;
        --section-padding-small: 60px;
    }
}