:root {
  --size-unit: 16;

  /* Desktop: 1367px – 1920px */
  --size-container-ideal: 1920;
  --size-container-min: 1367px;
  --size-container-max: 1920px;

  --size-container: clamp(
    var(--size-container-min),
    100vw,
    var(--size-container-max)
  );

  --size-font: calc(
    var(--size-container) / (var(--size-container-ideal) / var(--size-unit))
  );
}

html {
  font-size: var(--size-font) !important;
}

body {
  font-size: 1rem !important;
  line-height: 1.6;
}

/* Laptop: 1025px – 1366px */
@media screen and (max-width: 1366px) and (min-width: 1025px) {
  :root {
    --size-container-ideal: 1366;
    --size-container-min: 1025px;
    --size-container-max: 1366px;
  }
}

/* Tablet: 768px – 1024px */
@media screen and (max-width: 1024px) and (min-width: 768px) {
  :root {
    --size-container-ideal: 900;
    --size-container-min: 768px;
    --size-container-max: 1024px;
  }
}

/* Mobile: 480px – 767px */
@media screen and (max-width: 767px) and (min-width: 480px) {
  :root {
    --size-container-ideal: 600;
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Small mobile: 320px – 479px */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}