/* ------------------------- Scaling System by Osmo [https://osmo.supply/] ------------------------- */

/* Desktop */
:root {
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --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)));
}

body {
  font-size: var(--size-font);
}

.container,
.udp-container,
[data-udp-container] {
  max-width: var(--size-container);
}

.container.medium,
.udp-container.is-medium,
[data-udp-container="medium"] {
  max-width: calc(var(--size-container) * 0.85);
}

.container.small,
.udp-container.is-small,
[data-udp-container="small"] {
  max-width: calc(var(--size-container) * 0.7);
}

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

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

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