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

:root {
    --hero: 55px;
    --h1: 42px;
    --h2: 33px;
    --h3: 28px;
    --h4: 24px;
    --p: 16px;
    --section-padding: 35px;
    --section-padding-l: 52.5px;
    --section-padding-xl: 70px;
    --pixel-20-18: 18px;
    --pixel-18-15: 15px;
    --pixel-22-18: 18px;
    --pixel-65-0: 0px;
    --pixel-65-40: 40px;
    --pixel-30-20: 20px;
    --pixel-16-14: 14px;
    --pixel-25-21: 21px;
    --pixel-17-16: 16px;
    --feature-list-check-width: 50px;
    --pixel-3-1: 1px;
    --tab-height: 65px;
}


@media screen and (min-width: 480px) {
  :root {
        --hero: calc(55px + ((100vw - 480px) / (1300 - 480)) * (80 - 55) );
        --h1: calc(42px + ((100vw - 480px) / (1300 - 480)) * (55 - 42) );
        --h2: calc(33px + ((100vw - 480px) / (1300 - 480)) * (43 - 33) );
        --h3: calc(28px + ((100vw - 480px) / (1300 - 480)) * (35 - 28) );
        --h4: calc(24px + ((100vw - 480px) / (1300 - 480)) * (30 - 24) );
        --p: calc(16px + ((100vw - 480px) / (1300 - 480)) * (18 - 16) );
        --section-padding: calc(35px + ((100vw - 480px) / (1300 - 480)) * (50 - 35) );
        --section-padding-l: calc(52.5px + ((100vw - 480px) / (1300 - 480)) * (75 - 52.5) );
        --section-padding-xl: calc(70px + ((100vw - 480px) / (1300 - 480)) * (100 - 70) );
        --pixel-20-18: calc(18px + ((100vw - 480px) / (1300 - 480)) * (20 - 18) );
        --pixel-18-15: calc(15px + ((100vw - 480px) / (1300 - 480)) * (18 - 15) );
        --pixel-22-18: calc(18px + ((100vw - 480px) / (1300 - 480)) * (22 - 18) );
        --pixel-65-0: calc(0px + ((100vw - 480px) / (1300 - 480)) * (65 - 0) );
        --pixel-65-40: calc(40px + ((100vw - 480px) / (1300 - 480)) * (65 - 40) );
        --pixel-30-20: calc(20px + ((100vw - 480px) / (1300 - 480)) * (30 - 20) );
        --pixel-16-14: calc(14px + ((100vw - 480px) / (1300 - 480)) * (16 - 14) );
        --pixel-25-21: calc(21px + ((100vw - 480px) / (1300 - 480)) * (25 - 21) );
        --pixel-17-16: calc(16px + ((100vw - 480px) / (1300 - 480)) * (17 - 16) );
        --feature-list-check-width: calc(50px + ((100vw - 480px) / (1300 - 480)) * (215 - 50) );
        --pixel-3-1: calc(1px + ((100vw - 480px) / (1300 - 480)) * (3 - 1) );
        --tab-height: calc(65px + ((100vw - 480px) / (1300 - 480)) * (80 - 65) );
    }
}


@media screen and (min-width: 1300px) {
  :root {
        --hero: 80px;
        --h1: 55px;
        --h2: 43px;
        --h3: 35px;
        --h4: 30px;
        --p: 18px;
        --section-padding: 50px;
        --section-padding-l: 75px;
        --section-padding-xl: 100px;
        --pixel-20-18: 20px;
        --pixel-18-15: 18px;
        --pixel-22-18: 22px;
        --pixel-65-0: 65px;
        --pixel-65-40: 65px;
        --pixel-30-20: 30px;
        --pixel-16-14: 16px;
        --pixel-25-21: 25px;
        --pixel-17-16: 17px;
        --feature-list-check-width: 215px;
        --pixel-3-1: 3px;
        --tab-height: 80px;
    }
}