@font-face {
  font-family: "GeneralSans-Variable";
  src: url("./assets/fonts/general-sans/GeneralSans-Variable.woff2")
      format("woff2"),
    url("./assets/fonts/general-sans/GeneralSans-Variable.woff") format("woff");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-primary: "Playfair Display", serif;
  --font-secondary: "GeneralSans-Variable", sans-serif;
  --color-primary-1: #d54d33;
  --color-primary-2: #78aa1c;
  --color-secondary-1: #151413;
  --color-secondary-2: #ffffff;
  --color-neutral-1: #3f3d39;
  --color-neutral-2: #595750;
  --color-neutral-3: #bebcaa;
  --color-neutral-4: #ebeae4;
  --color-light: var(--color-secondary-2);
  --color-dark: var(--color-secondary-1);
  --color-background: var(--color-light);
  --color-text: var(--color-dark);
  --color-overlay: rgba(255, 255, 255, 0.1);
  --color-overlay-dark: rgba(0, 0, 0, 0.5);
  --font-size-1: clamp(2.5rem, 5.4vw, 104px);
  --font-size-2: clamp(2.25rem, 5vw, 96px);
  --font-size-3: clamp(1.75rem, 1.875vw, 36px);
  --font-size-3--alt: clamp(1.75rem, 2.5vw, 48px);
  --font-size-4: clamp(1.25rem, 1.25vw, 24px);
  --font-size-5: 18px;
  --font-size-6: 1rem;
  --font-size-body-lg: clamp(1.3rem, 1.45vw, 28px);
  --font-size-body-md: clamp(1.2rem, 1.05vw, 20px);
  --font-size-body-sm: var(--font-size-6);
  --font-size-sm: 12px;
  --page-width: 1920px;
  --container-width: 1440px;
  --container-width-sm: 1000px;
  --content-width: 900px;
  --spacer: clamp(3rem, 6.667vw, 8rem);
  --spacer-sm: calc(var(--spacer) / 2);
  --spacer-lg: calc(var(--spacer) * 2);
  --spacer-xl: calc(var(--spacer) * 3);
  --gutter: clamp(1rem, 3vw, 52px);
  --gutter-sm: calc(var(--gutter) / 2);
  --gutter-lg: calc(var(--gutter) * 2);
  --gutter-xl: calc(var(--gutter) * 3);
  --gap: 2rem;
  --gap-xxs: calc(var(--gap) / 8);
  --gap-xs: calc(var(--gap) / 4);
  --gap-sm: calc(var(--gap) / 2);
  --gap-lg: calc(var(--gap) * 2);
  --border-radius: 9999em;
  --border-radius-sm: 10px;
  --box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --transition-ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
  --transition-duration: 0.2s;
  --transition-duration-long: 0.4s;
  --transition-duration-ease-in-out: var(--transition-duration)
    cubic-bezier(0.7, 0, 0.3, 1);
  --aspect-square: 1;
  --aspect-portrait: 4/5;
  --aspect-photo: 5/4;
  --aspect-fullscreen: 4/3;
  --aspect-film: 3/2;
  --aspect-video: 16/9;
  --aspect-ultrawide: 21/9;
}