:root {
  --font-family: "Obviously", sans-serif;
  --font-family-AvenirNextCyr: "Avenir Next Cyr", sans-serif;
  --color-red: #f04d4f;
  --color-purple: #8367ad;
  --color-yellow: #fba933;
  --color-orange: #ee7f50;
  --color-pink: #e84598;
  --color-purple-muted: #a969ac;
  --color-yellow-light: #ffdd99;
  --color-black: #231f20;
  --color-accent: #efe0c7;
  --color-white: #ffffff;
}

.font-obviously {
  font-family: var(--font-family);
}

.font-avenir-next-cyr {
  font-family: var(--font-family-AvenirNextCyr);
}

.h-title {
  font-size: clamp(6.6875rem, 3.3649611399rem + 11.1917098446vw, 13.4375rem);
  line-height: 1;
  font-family: var(--font-family);
  will-change: transform;
  font-stretch: 450%;
  font-display: swap;
}

.h-subtitle {
  font-size: clamp(4.75rem, 2.4119170984rem + 7.8756476684vw, 9.5rem);
  line-height: 1;
  font-family: var(--font-family);
  will-change: transform;
  font-stretch: 450%;
  font-display: swap;
}

h1,
.h1 {
  font-size: clamp(5.625rem, 1.7794689119rem + 12.9533678756vw, 13.4375rem);
  padding-top: 0.186em;
  line-height: 0.698;
  font-family: var(--font-family);
  font-weight: 900;
  will-change: transform;
  font-stretch: 450%;
  font-display: swap;
}
h2,
.h2 {
  font-size: clamp(3.875rem, 1.1062176166rem + 9.3264248705vw, 9.5rem);
  line-height: 0.9868;
  font-family: var(--font-family);
  will-change: transform;
  font-stretch: 450%;
  font-weight: 900;
  font-display: swap;
}
h2.line-height-narrow,
.h2.line-height-narrow {
  line-height: 0.86;
}
.h3-lg {
  font-size: clamp(3.125rem, 2.5097150259rem + 2.0725388601vw, 4.375rem);
  line-height: 1.2;
  font-family: var(--font-family);
  will-change: transform;
  font-stretch: 450%;
  font-display: swap;
}

.h3-md {
  font-size: clamp(1.5625rem, 0.7933937824rem + 2.5906735751vw, 3.125rem);
  line-height: 2.44;
  font-weight: 900;
  font-family: var(--font-family);
  will-change: transform;
  font-stretch: 450%;
  font-display: swap;
}

h3,
.h3 {
  font-size: clamp(1.5rem, 0.8231865285rem + 2.2797927461vw, 2.875rem);
  line-height: 1.3;
  font-family: var(--font-family);
  font-weight: 700;
  will-change: transform;
  font-stretch: 450%;
  font-display: swap;
}

h4,
.h4 {
  font-size: clamp(1.5rem, 1.0077720207rem + 1.6580310881vw, 2.5rem);
  line-height: 1.2;
  font-family: var(--font-family);
  font-weight: 300;
  will-change: transform;
  letter-spacing: -2px;
  font-stretch: 450%;
  font-display: swap;
}
h5,
.h5 {
  font-size: clamp(1.125rem, 0.9404145078rem + 0.621761658vw, 1.5rem);
  line-height: 1.2;
  font-family: var(--font-family);
  will-change: transform;
  font-stretch: 450%;
  font-weight: 300;
  font-display: swap;
}

.bb {
  font-weight: 900;
  font-display: swap;
}

.b {
  font-weight: 800;
  font-display: swap;
}

h6,
.h6 {
  font-size: clamp(1rem, 0.8769430052rem + 0.414507772vw, 1.25rem);
  line-height: 1;
  font-family: var(--font-family);
  will-change: transform;
  font-stretch: 450%;
  font-display: swap;
}

.text-footer-title {
  font-size: clamp(3.125rem, 1.8944300518rem + 4.1450777202vw, 5.625rem);
  line-height: 1;
  font-family: var(--font-family);
  will-change: transform;
  font-stretch: 450%;
  font-display: swap;
}

.text-32 {
  font-size: clamp(1.5rem, 1.2538860104rem + 0.829015544vw, 2rem);
  line-height: 1.2;
  font-family: var(--font-family);
  font-weight: 300;
  will-change: transform;
  font-stretch: 450%;
  font-display: swap;
}

.text-26 {
  font-size: clamp(1.125rem, 0.8788860104rem + 0.829015544vw, 1.625rem);
  line-height: 1.2;
  font-family: var(--font-family);
  font-weight: 300;
  will-change: transform;
  font-stretch: 450%;
  font-display: swap;
}

.text-18 {
  font-size: clamp(1rem, 0.9384715026rem + 0.207253886vw, 1.125rem);
  line-height: 1.2;
  font-family: var(--font-family);
  font-weight: 300;
  will-change: transform;
  font-stretch: 450%;
  font-display: swap;
}

.h3-2 {
  font-size: clamp(2.25rem, 1.8193005181rem + 1.4507772021vw, 3.125rem);
  line-height: 1;
  font-family: var(--font-family);
  font-weight: 900;
  will-change: transform;
  font-stretch: 450%;
  font-display: swap;
}

p,
.p {
  font-size: clamp(1rem, 0.9384715026rem + 0.207253886vw, 1.125rem);
  line-height: 1.2;
  font-family: var(--font-family);
  font-weight: 300;
  will-change: transform;
  font-stretch: 450%;
  font-display: swap;
}

.h2-mb {
  margin-bottom: clamp(3.125rem, 1.5867875648rem + 5.1813471503vw, 6.25rem);
}

.quote {
  font-size: clamp(1.125rem, 0.9404145078rem + 0.621761658vw, 1.5rem);
  line-height: 1.2;
  font-family: var(--font-family);
  font-weight: 300;
  will-change: transform;
  font-stretch: 450%;
  font-style: italic;
  font-display: swap;
}

.text-red {
  color: var(--color-red);
}

.bg-red {
  background-color: var(--color-red);
}

.text-purple {
  color: var(--color-purple);
}

.bg-purple {
  background-color: var(--color-purple);
}

.text-yellow {
  color: var(--color-yellow);
}

.bg-yellow {
  background-color: var(--color-yellow);
}

.text-orange {
  color: var(--color-orange);
}

.bg-orange {
  background-color: var(--color-orange);
}

.text-pink {
  color: var(--color-pink);
}

.bg-pink {
  background-color: var(--color-pink);
}

.text-purple-muted {
  color: var(--color-purple-muted);
}

.bg-purple-muted {
  background-color: var(--color-purple-muted);
}

.text-yellow-light {
  color: var(--color-yellow-light);
}

.bg-yellow-light {
  background-color: var(--color-yellow-light);
}

.text-black {
  color: var(--color-black);
}

.bg-black {
  background-color: var(--color-black);
}

.text-accent {
  color: var(--color-accent);
}

.bg-accent {
  background-color: var(--color-accent);
}

.text-white {
  color: var(--color-white);
}

.bg-white {
  background-color: var(--color-white);
}