/*sizes nav*/

body {
  --burger-line-height: 5px;
  --nav-icon-height: 27px;
  --nav-icon-width: 52px;
  --nav-icon-padding-X: 5vw;
  --nav-icon-padding-Y: var(--gap-m);
  --icon-height: 25px;
}

/*sizes,pad,marg*/

:root {
  --h1-font-size: clamp(
    21px,
    calc(21px + (36 - 21) * ((100vw - 375px) / (1920 - 375))),
    36px
  );
  --h2-font-size: clamp(
    19px,
    calc(19px + (30 - 19) * ((100vw - 375px) / (1920 - 375))),
    30px
  );
  --h3-font-size: 16px;
  --h4-font-size: clamp(
    24px,
    calc(24px + (35 - 24) * ((100vw - 375px) / (1920 - 375))),
    35px
  );
  --h5-font-size: clamp(
    18px,
    calc(18px + (24 - 18) * ((100vw - 375px) / (1920 - 375))),
    24px
  );
  --h6-font-size: clamp(
    14px,
    calc(14px + (16 - 14) * ((100vw - 375px) / (1920 - 375))),
    16px
  );
  --claim-font-size: clamp(
    21px,
    calc(21px + (45 - 21) * ((100vw - 375px) / (1920 - 375))),
    45px
  );
  --base-font-size: clamp(
    14px,
    calc(14px + (16 - 14) * ((100vw - 375px) / (1920 - 375))),
    16px
  );
  --btn-font-size: clamp(
    14px,
    calc(14px + (15 - 14) * ((100vw - 767px) / (1920 - 767))),
    15px
  );

  /* Line height */
  --h1-line-height: clamp(
    25px,
    calc(25px + (44 - 25) * ((100vw - 375px) / (1920 - 375))),
    44px
  );
  --h2-line-height: clamp(
    16px,
    calc(16px + (37 - 16) * ((100vw - 375px) / (1920 - 375))),
    37px
  );
  --base-line-height: clamp(
    21px,
    calc(21px + (28 - 21) * ((100vw - 375px) / (1920 - 375))),
    28px
  );
  --button-line-height: clamp(
    18px,
    calc(18px + (20 - 18) * ((100vw - 375px) / (1920 - 375))),
    20px
  );

  /**Sidebar*/
  --sidebar-width: 325px;
  /**spacing*/
  --gap-s: 15px;
  --gap-m: clamp(30px, 8vw, 45px);

  --gap-l: clamp(45px, 12vw, 70px);
  --gap-xl: clamp(110px, 29.33vw, 175px);
  --cont-gap: clamp(110px, 29.33vw, 175px);
  --bg-padding: clamp(90px, 24vw, 120px);
  
  
  --gap-m: clamp(1.875rem, 1.423rem + 1.29vw, 2.813rem);
  --gap-l: clamp(2.813rem, 2.059rem + 2.15vw, 4.375rem);
  --gap-xl: clamp(6.875rem, 4.915rem + 5.6vw, 10.938rem);
  --cont-gap: clamp(6.875rem, 4.915rem + 5.6vw, 10.938rem);

}

/*fonts*/

:root {
  --mainfont: "Onest";
  --headlinefont: "Staatliches";
  --specialfont: "quotes-script", sans-serif;
}
/*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) {
  body {
    --burger-line-height: 4px;
    --nav-icon-height: 24px;
    --nav-icon-width: 47px;
  }
}

@media (max-width: 768px) {
  body {
    --burger-line-height: 3px;
    --nav-icon-height: 18px;
    --nav-icon-width: 29px;
  }
}

@media (max-width: 576px) {
  body {
    --icon-height: 20px;
  }
}

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

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