/*sizes nav*/

body {
    --burger-line-height: 3px;
    --nav-icon-height: 19px;
    --nav-icon-width: 49px;
    --nav-icon-padding-X: clamp(29px, 5vw, 61px);
    --nav-icon-padding-Y: 46px;
}

/*sizes,pad,marg*/

:root {
    --margin-bottom-row: 7.8vw;
    --h1-font-size: min(calc(16px + (30 - 16) * ((100vw - 375px) / (1920 - 375))), 30px);
    --h2-font-size: min(calc(22px + (53 - 22) * ((100vw - 375px) / (1920 - 375))), 53px);
    --h3-font-size: min(calc(16px + (30 - 16) * ((100vw - 375px) / (1920 - 375))), 30px);
    --h4-font-size: min(calc(35px + (80 - 35) * ((100vw - 375px) / (1920 - 375))), 80px);
    --h5-font-size: min(calc(16px + (24 - 16) * ((100vw - 375px) / (1920 - 375))), 24px);
    --h6-font-size: min(calc(42px + (150 - 42) * ((100vw - 375px) / (1920 - 375))), 150px);
    --base-font-size: min(calc(15px + (26 - 15) * ((100vw - 375px) / (1920 - 375))), 26px);
    --btn-font-size: min(calc(12px + (15 - 12) * ((100vw - 375px) / (1920 - 375))), 15px);
    /**spacing*/
    --gap-s: clamp(10px, 3.5vw, 15px);
    --gap-m: clamp(15px, 2vw, 30px);
    --gap-l: clamp(30px, calc(3.5vw * 300 / 100), 45px);
    --gap-xl: clamp(50px, calc(3.5vw * 666 / 100), 100px);
    --cont-gap: clamp(90px, 15vw, 180px);
    --bg-padding: clamp(50px, 9vw, 100x);
    /**cstm-vars*/
    --pad-slider: 15.5vw;
    --minus-margin-ovw: clamp(100px, 15vw, 214px);
    --icon-size: 22px;
}





/*fonts*/

:root {
    --mainfont: 'Unbounded';
    --headlinefont: 'chorine-large';
}


/*VC*/

@media (min-width: 1920px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

@media (max-width: 1500px) {
    :root {
        --polaroid-gap: 6vw;
    }
}

@media (max-width: 1200px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

@media (max-width: 1024px) {
    :root {
        --polaroid-gap: 8vw;
    }
}

@media (max-width: 990px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

@media (max-width: 768px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

@media (max-width: 576px) {

    body {
        --nav-icon-padding-Y: 27px;
        --nav-icon-padding-X: 15px;
    }

}

@media (max-width: 420px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

@media (max-width: 320px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}