:root {
  --container-default: 100%;
  --container-padding: clamp(20px, 10vw, 144px);
  --container-narrow: clamp(20px, 16.7361111vw, 241px);

  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;

  --color-body: #7d5438;
  --color-body-rgb: 125, 84, 56;
  --color-body-bg: #f7f5f2;
  --color-body-bg-rgb: 247, 245, 242;
  --color-beige: #f3f0ea;
  --color-beige-rgb: 243, 240, 234;
  --color-gray: #9c9c9c;
  --color-gray-rgb: 156, 156, 156;
  --color-gray-light: #f5f5f5;
  --color-gray-light-rgb: 245, 245, 245;
  --color-brown: #5b3d27;
  --color-brown-rgb: 91, 61, 39;

  --color-border: var(--color-gray);
  --color-error: #ff0000;
  --color-placeholder: inherit;

  --filter-black: brightness(0);
  --filter-white: brightness(0) invert(1);

  --font-body: "tt-commons-pro", sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Base font-size: 12px = 1rem */
  --font-size-desc: 0.8333rem; /* 10px */
  --font-size-btn: 1rem; /* 12px */
  --font-size-body: 1rem; /* 12px */
  --font-size-sub: 1.5rem; /* 18px */
  --font-size-h2: 1.3333rem; /* 16px */
  --font-size-h1: 2rem; /* 24px */

  --spacing-5xl: 150px;
  --spacing-5xl-minus: -150px;
  --spacing-4xl: 120px;
  --spacing-4xl-minus: -120px;
  --spacing-3xl: 100px;
  --spacing-3xl-minus: -100px;
  --spacing-2xl: 72px;
  --spacing-2xl-minus: -72px;
  --spacing-xl: 64px;
  --spacing-xl-minus: -64px;
  --spacing-2lg: 56px;
  --spacing-2lg-minus: -56px;
  --spacing-lg: 40px;
  --spacing-lg-minus: -40px;
  --spacing-2md: 36px;
  --spacing-2md-minus: -36px;
  --spacing-md: 30px;
  --spacing-md-minus: -30px;
  --spacing-2sm: 24px;
  --spacing-2sm-minus: -24px;
  --spacing-sm: 20px;
  --spacing-sm-minus: -20px;
  --spacing-xs: 16px;
  --spacing-xs-minus: -16px;
  --spacing-2xs: 12px;
  --spacing-2xs-minus: -12px;
  --spacing-3xs: 8px;
  --spacing-3xs-minus: -8px;
  --spacing-4xs: 4px;
  --spacing-4xs-minus: -4px;

  --input-height: 32px;
  --button-height: 28px;
  --opacity: 0.5;

  --transition: 0.4s;
  --transition-x2: 0.8s;
  --timing-function: ease-in-out;
}

@media (max-width: 1399.98px) {
}
@media (max-width: 1199.98px) {
}
@media (max-width: 991.98px) {
}
@media (max-width: 767.98px) {
  :root {
    --container-padding: 16px;
    --container-narrow: 16px;
    --font-size-sub: 1.3333rem; /* 16px */
  }
}
@media (max-width: 575.98px) {
}