:root {
  --layout-margin: 16px;
  --gutter: 16px;
  --header-height: 92px;

  --wrapper-horizontal-padding: 72px;
  --wrapper-horizontal-padding-large: 72px;
  --wrapper-horizontal-margin: 72px;

  --gutter-extraSmall: 8px;
  --gutter-small: 16px;
  --gutter-medium: 24px;
  --gutter-large: 48px;
  --gutter-extraLarge: 72px;

  --small-width-container: 624px;
  --max-width-container: 1440px;

  --radius-small: 8px;
  --radius-large: 16px;
  --radius-xlarge: 32px;

  --black: rgb(0, 0, 0);

  --filter-grayscale: grayscale(1) sepia(0.1) contrast(0.85);

  --primary-100: rgb(242, 239, 236);
  --primary-200: rgb(234, 230, 226);
  --primary-400: rgb(217, 210, 201);
  --primary-700: rgb(176, 164, 148);
  --primary-950: rgb(51, 48, 45);

  --secondary-600: rgb(192, 186, 177);
  --secondary-700: rgb(147, 140, 129);
  --secondary-800: rgb(136, 129, 119);
  --secondary-950: rgb(36, 31, 25);

  --neutral-100: rgb(250, 250, 250);
  --neutral-200: rgb(240, 240, 240);
  --neutral-300: rgb(224, 224, 224);
  --neutral-400: rgb(200, 200, 200);
  --neutral-500: rgb(160, 160, 160);
  --neutral-600: rgb(120, 120, 120);
  --neutral-700: rgb(90, 90, 90);
  --neutral-800: rgb(60, 60, 60);
  --neutral-900: rgb(30, 30, 30);
  --neutral-950: rgb(15, 15, 15);

  --title-font:
    "Melodrama-Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --display-font:
    "Melodrama-Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --subtitle-font:
    "DM-Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --paragraph-font:
    "DM-Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  --title-weight: 450;
  --display-weight: 350;
  --display-size: clamp(2rem, calc(5vw + 0.5rem), 5.5rem);
  --display-height: clamp(
    calc(2rem + 0.5rem),
    calc(5vw + 1rem),
    calc(5.5rem + 0.5rem)
  );
  --subtitle-weight: 600;
  --paragraph-weight: 400;

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

@media screen and (min-width: 768px) {
  :root {
    --wrapper-horizontal-margin: 96px;
    --wrapper-horizontal-padding: 72px;
    --wrapper-horizontal-padding-large: 144px;
  }
}

* {
  list-style: none;
}

html,
body {
  overscroll-behavior: none;
}

body.is-menu-open {
  overflow: hidden;
}

/* .site-main {
  overflow-x: clip;
} */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

section {
  max-width: var(--max-width-container);
  padding-top: var(--wrapper-horizontal-padding);
  padding-bottom: var(--wrapper-horizontal-padding);
  padding-left: var(--layout-margin);
  padding-right: var(--layout-margin);
  margin: 0 auto;
}

section.no-space {
  max-width: none;
}

section.hero {
  padding-top: 0;
}

section.small {
  max-width: var(--small-width-container);
}

section.spaced {
  padding-top: var(--wrapper-horizontal-padding-large);
  padding-bottom: var(--wrapper-horizontal-padding-large);
}

section.colored-bg {
  background-color: var(--primary-700);
  border-radius: var(--radius-large);
}

.column-grid {
  display: flex;
  flex-direction: column;
  column-gap: var(--gutter);
}

.max-width-container {
  max-width: var(--max-width-container);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .column-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 1024px) {
  .column-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
}

.img-container {
  line-height: 0;
}

.is-desktop {
  display: none;
}

.is-mobile {
  display: block;
}

@media (min-width: 1024px) {
  .is-desktop {
    display: block;
  }
  .is-mobile {
    display: none;
  }
}

.separator-container {
  padding: 0 var(--layout-margin);
  max-width: 1440px;
  margin: 0 auto;
}

.separator-container.small {
  max-width: var(--small-width-container);
}

.separator-container hr {
  margin: 0;
  background-color: var(--black);
}

.flex-right {
  display: flex;
  justify-content: flex-end;
}

.list-styled li {
  list-style: inherit;
}

.flex {
  display: flex;
}

/* Buttons and links
--------------------------------------------- */

.primary-btn a,
.primary-btn input[type="submit"] {
  display: inline-block;
  text-align: center;
  border: none;
  padding: var(--gutter-small) var(--gutter-large)
    calc(var(--gutter-small) - 1px);
  background-color: var(--secondary-950);
  color: var(--primary-100);
  text-decoration: none;
  border-radius: 8px;
  transition:
    background-color 0.3s ease,
    transform 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .primary-btn a:hover,
  .primary-btn input[type="submit"]:hover {
    background-color: var(--secondary-800);
  }
}

.primary-btn a:active,
.secondary-btn a:active,
.primary-btn input[type="submit"]:active {
  transform: scale(0.98);
}

.secondary-btn a {
  display: inline-block;
  text-align: center;
  border: 1px solid var(--secondary-950);
  padding: var(--gutter-small) var(--gutter-large)
    calc(var(--gutter-small) - 1px);
  background-color: transparent;
  color: var(--black);
  text-decoration: none;
  border-radius: 8px;
  transition:
    background-color 0.3s ease,
    transform 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .secondary-btn a:hover {
    background-color: var(--secondary-950);
    color: var(--primary-100);
  }
}

.centered.primary-btn,
.centered.secondary-btn {
  display: flex;
  justify-content: center;
  width: 100%;
}

#blog-buttons-page div {
  display: flex;
}

#blog-buttons-page div a {
  width: auto;
}

/* Animation
-------------------------------------- */
.img-container {
  transition: 1s ease;
  clip-path: inset(0 0 0 0);
}

.img-container.img-hidden {
  clip-path: inset(0 0 100% 0);
}

.img-container img {
  transition: 1s ease;
  transform: scale(1);
}

.img-container.img-hidden img {
  transform: scale(1.1);
}

/* Video
-------------------------------------- */

video {
  max-width: 100%;
}

.dektop-video {
  display: none;
}

@media (min-width: 768px) {
  .dektop-video {
    display: block;
  }
}

.mobile-video {
  display: block;
}

@media (min-width: 768px) {
  .mobile-video {
    display: none;
  }
}