:root {
  --barit-black: #17181A;
  --barit-dark: #101113;
  --barit-red: #E13B35;
  --barit-red-deep: #D93630;
  --barit-red-hover: #BF2D28;
  --barit-offwhite: #F6F6F3;
  --barit-white: #FFFFFF;
  --barit-gray-700: #74777B;
  --barit-gray-300: #DFE0DD;
  --barit-content-width: 85rem;
  --barit-copy-width: 45rem;
  --barit-space-1: .5rem;
  --barit-space-2: 1rem;
  --barit-space-3: 1.5rem;
  --barit-space-4: 2rem;
  --barit-space-6: 3rem;
  --barit-space-8: 4rem;
  --barit-space-12: 6rem;
  --barit-space-16: 8rem;
  --barit-section-space: var(--barit-space-16);
  --barit-gutter: var(--barit-space-6);
  --barit-transition: 250ms ease;
  --barit-type-eyebrow: .75rem;
  --barit-type-body: 1rem;
  --barit-type-lead: 1.125rem;
  --barit-type-section: clamp(2rem, 3.5vw, 4rem);
}

.container {
  width: 100%;
  max-width: calc(var(--barit-content-width) + 2 * var(--barit-gutter));
  padding-inline: var(--barit-gutter);
  box-sizing: border-box;
}

@media (max-width: 1199.98px) {
  :root {
    --barit-section-space: var(--barit-space-12);
    --barit-gutter: var(--barit-space-4);
  }
}

@media (max-width: 767.98px) {
  :root {
    --barit-section-space: var(--barit-space-8);
    --barit-gutter: var(--barit-space-3);
  }
}

@media (max-width: 359.98px) {
  :root { --barit-gutter: var(--barit-space-2); }
}