/*sizes nav*/

body {
  --burger-line-height: 5px;
  --nav-icon-height: clamp(24px, 2.66vw, 30px);
  --nav-icon-width: clamp(24px, 2.66vw, 30px);
  --nav-icon-padding-X: 2.4vw;
  --nav-icon-padding-Y: 2.4vw;
}

/*sizes,pad,marg*/

:root {
  /* same size as base-small  */
  --h1-font-size: clamp(
    12px,
    calc(12px + (14 - 12) * ((100vw - 375px) / (1920 - 375))),
    14px
  );
  --h2-font-size: clamp(
    40px,
    calc(40px + (80 - 40) * ((100vw - 375px) / (1920 - 375))),
    80px
  );
  --h3-font-size: clamp(
    15px,
    calc(15px + (20 - 15) * ((100vw - 375px) / (1920 - 375))),
    20px
  );
  --h4-font-size: clamp(
    33px,
    calc(33px + (50 - 33) * ((100vw - 375px) / (1920 - 375))),
    50px
  );
  --h5-font-size: clamp(
    22px,
    calc(22px + (34 - 22) * ((100vw - 375px) / (1920 - 375))),
    34px
  );
  --h6-font-size: clamp(
    18px,
    calc(18px + (28 - 18) * ((100vw - 375px) / (1920 - 375))),
    28px
  );
  --h6-small-font-size: clamp(
    20px,
    calc(20px + (26 - 20) * ((100vw - 375px) / (1920 - 375))),
    26px
  );
  --hxxl-font-size: clamp(
    50px,
    calc(50px + (130 - 50) * ((100vw - 375px) / (1920 - 375))),
    130px
  );

  --base-font-size: clamp(
    15px,
    calc(15px + (18 - 15) * ((100vw - 375px) / (1920 - 375))),
    18px
  );

  --btn-font-size: clamp(
    13.3px,
    calc(13.3px + (15 - 13.3) * ((100vw - 375px) / (1920 - 375))),
    15px
  );

  --listing-font-size: clamp(
    14px,
    calc(14px + (16 - 13) * ((100vw - 375px) / (1920 - 375))),
    16px
  );

  /**spacing*/
  --gap-s: clamp(15px, 2.66vw, 15px);
  --gap-m: clamp(20px, 5.33vw, 30px);
  --gap-l: clamp(30px, 9.33vw, 50px);
  --gap-xl: clamp(40px, 10vw, 110px);
  --cont-gap: clamp(100px, 20vw, 250px);
  --lisiting-gap: clamp(0px, 2vw, 10px);

  /**Theme Specific*/
  --border-radius-20: 20px;
}

/*fonts*/

:root {
  --mainfont: "roc-grotesk";
  --mainfont-variable: "roc-grotesk-variable";
  --headlinefont: "aquavit";
}

/*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) {
}

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

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