:root {
  --spacing-xs: 10px;
  --spacing-sm: 15px;
  --spacing-md: 30px;
  --spacing-lg: 60px;
  --spacing-xl: 100px;

  --spacing-negative-xs: -10px;
  --spacing-negative-sm: -15px;
  --spacing-negative-md: -30px;
  --spacing-negative-lg: -60px;
  --spacing-negative-xl: -100px;

  --spacing-page-header: 40px;
}

/* Scafolding */
.container {
  position: relative;
}


.main-content-wrapper {
  padding-top: calc(var(--spacing-xl) * 2);
}

.block-page-template .main-content-wrapper {
  padding-top: 0;
}

.site-section {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.site-section-xl {
  margin-bottom: calc(var(--spacing-lg) * 2);
  padding-bottom: calc(var(--spacing-lg) * 2);
}

.site-section-lg {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.site-section-md {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.site-section-sm {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.site-section-xs {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.site-section-page-header {
  margin-bottom: var(--spacing-page-header);
  padding-bottom: var(--spacing-page-header);
}


.no-top-spacing {
  margin-top: 0;
  padding-top: 0;
}

.no-bottom-spacing {
  margin-bottom: 0;
  padding-bottom: 0;
}

.negative-margin-bottom-lg {
  margin-bottom: var(--spacing-negative-lg);
}

.content-stack > [class*="site-section"]:first-child {
  margin-top: 0;
  padding-top: 0;
}

.border-top {
  border-top: 1px solid var(--color-section-border);
}

.border-bottom {
  border-bottom: 1px solid var(--color-section-border);
}

.eyebrow-text:has(+ h1),
.eyebrow-text:has(+ h2),
.eyebrow-text:has(+ h3),
.eyebrow-text:has(+ h4),
.eyebrow-text:has(+ h5) {
  margin-bottom: var(--spacing-sm);
}

img + .eyebrow-text {
  margin-top: calc(var(--spacing-md) + 5px);
}

@media (min-width: 0px) AND (max-width: 992px) {
  .main-content-wrapper {
    padding-top: calc(var(--spacing-xl) * 1.5);
  }
}

/* Phone Breakpoint (phone ONLY) */
@media (min-width: 0px) AND (max-width: 767px) {
  :root {
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 80px;
  
    --spacing-negative-xs: -5px;
    --spacing-negative-sm: -10px;
    --spacing-negative-md: -320px;
    --spacing-negative-lg: -40px;
    --spacing-negative-xl: -80px;
  }
}