/*sizes nav*/
body {
  --burger-line-height: 3px;
  --nav-icon-height: 17px;
  --nav-icon-width: 28px;
  --nav-icon-padding-X: clamp(16px, 4vw, 40px);
  --nav-icon-padding-Y: clamp(25px, 5vw, 50px);
  --logo-widht-home: clamp(180px, 40vw, 649px);
  --icon-size: 25px;
  --height-miniform: calc(var(--gap-l) + 10px);
}

/*sizes,pad,marg*/

:root {
  --h1-font-size: clamp(14px,
      calc(14px + (23 - 14) * ((100vw - 375px) / (1920 - 375))),
      23px);
  --h2-font-size: clamp(20px,
      calc(20px + (45 - 20) * ((100vw - 375px) / (1920 - 375))),
      45px);
  --h3-font-size: clamp(20px,
      calc(20px + (28 - 20) * ((100vw - 375px) / (1920 - 375))),
      28px);
  --h4-font-size: clamp(18px,
      calc(18px + (20 - 18) * ((100vw - 375px) / (1920 - 375))),
      20px);
  --h5-font-size: clamp(22px,
      calc(22px + (26 - 22) * ((100vw - 375px) / (1920 - 375))),
      26px);
  --h6-font-size: clamp(15px,
      calc(15px + (17 - 15) * ((100vw - 375px) / (1920 - 375))),
      17px);
  --base-font-size: clamp(15px,
      calc(15px + (17 - 15) * ((100vw - 375px) / (1920 - 375))),
      17px);
  --btn-font-size: clamp(14px,
      calc(14px + (15 - 14) * ((100vw - 375px) / (1920 - 375))),
      15px);

  /**spacing*/
  --gap-s: clamp(10px, 2.66vw, 15px);
  --gap-m: clamp(20px, 5.33vw, 30px);
  --gap-l: clamp(30px, 9.33vw, 60px);
  --gap-xl: clamp(50px, 20vw, 110px);
  --cont-gap: clamp(100px, 20vw, 200px);
  --bg-padding: clamp(80px, 18vw, 120px);
}

/*fonts*/

:root {
  --mainfont: "bricolage-grotesque";
  --headlinefont: "haboro-contrast-normal";
}

/*radius*/

:root {
  --border-radius-m: clamp(5px, 2.66vw, 10px);
  --border-radius-s: 5px;
}

/*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 {
    --burger-line-height: 2px;
    --nav-icon-height: 12px;
    --nav-icon-width: 24px;
  }

  body {
    --icon-size: 20px;
  }
}

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

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