/* working:

&:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 80px;
  background: var(--colors-primary-500);

	clip-path: polygon(
		0 0,
		100% 0,  
		calc(100% - 160px) 100%, 
		0 100%
	);
}

*/
:root {
  --colors-primary-100: #D3E8E2;
  --colors-primary-200: #5AB784;
  --colors-primary-300: #004750;
  --colors-primary-400: #003844;
  --colors-primary-500: #002A3A;
  --colors-secondary-400: #FF5F00;
  --colors-natural-50: #f3f3f3;
  --colors-natural-100: #d1e8e3;
  --colors-natural-150: #D8DEE0;
  --colors-natural-200: #D3E8E2;
  --colors-natural-400: #97A3AE;
  --colors-blue-100: #B4C8D7;
  --colors-blue-300: #0082CA;
  --colors-white: #ffffff;
  --colors-black: #000000;
  --colors-background-header: var(--colors-primary-400);
  --colors-background-footer: var(--colors-primary-400);
  --colors-text-default: var(--colors-black);
  --colors-text-invert: #ffffff !important;
  --colors-border-default: var(--colors-black);
  --colors-border-invert: var(--colors-white);
  --colors-indicator: var(--colors-primary-200);
  --font-family-proxima-nova-condensed: "Proxima Nova Condensed", sans-serif;
  --font-family-proxima-nova-extra-condensed: "Proxima Nova Extra Condensed", sans-serif;
  --font-weight-extralight: 100;
  --font-weight-light: 200;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-xs: 0.875rem;
  --font-size-sm: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-body: 1.125rem;
  --font-size-h1: 3rem;
  --font-size-h2: 2.375rem;
  --font-size-h3: 2.125rem;
  --font-size-h4: 1.625rem;
  --font-size-desc: 1rem;
  --font-size-lead: 1.625rem;
  --font-size-footer: 0.75rem;
  --font-size-hero: 5rem;
  --font-size-hero-subtitle: 2.25rem;
  --font-size-hero-small: 4em;
  --font-size-button: 1.375rem;
  --font-size-quote-text: 1.375rem;
  --font-size-quote-name: 1.5rem;
  --font-size-quote-job: var(--font-size-lg);
  --font-size-accordion-header: 1.5rem;
  --font-size-breadcrumb: 1rem;
  --font-size-nav-level-2: 1.75rem;
  --font-size-nav-level-3: 1.5rem;
  --font-size-nav-level-4: 1.125rem;
  --line-height-min: 1;
  --line-height-sm: 1.2;
  --line-height-md: 1.33;
  --line-height-lg: 1.5;
  --line-height-xl: 2;
  --line-height-heading: 1.1;
  --letter-spacing-default: 0.25rem;
  --global-gutter-x: 3rem;
  --global-max-width: 120rem;
  --global-1-col-text-width: 80%;
  --global-1-col-text-width-on-textcenter: 66%;
  --global-spacing-4xs: 0.5rem;
  --global-spacing-3xs: 0.5rem;
  --global-spacing-2xs: 0.75rem;
  --global-spacing-xs: 1rem;
  --global-spacing-sm: 1.5rem;
  --global-spacing-md: 2rem;
  --global-spacing-lg: 3rem;
  --global-spacing-xl: 4rem;
  --global-spacing-2xl: 4.5rem;
  --global-spacing-3xl: 7.5rem;
  --global-spacing-section: 5rem;
  --rating-stroke-width: 1.625;
  --rating-star-size: 1.5rem;
}
@media (max-width: 767px) {
  :root {
    --font-size-sm: 0.875rem;
    --font-size-md: 0.875rem;
    --font-size-lg: 1rem;
    --font-size-desc: 0.875rem;
    --font-size-hero: 4rem;
    --font-size-hero-subtitle: 1.75rem;
    --font-size-hero-small: 3.25rem;
    --global-gutter-x: 3rem;
    --global-spacing-section: 2.5rem;
  }
}
@media (max-width: 575px) {
  :root {
    --font-size-h1: 2.375rem;
    --font-size-h2: 2.125rem;
    --font-size-h3: 1.875rem;
    --font-size-h4: 1.375rem;
    --font-size-desc: 0.75rem;
    --font-size-lead: 1.5rem;
    --font-size-hero: 2.375rem;
    --font-size-hero-subtitle: 1.375rem;
    --font-size-hero-small: 2.375rem;
    --global-gutter-x: 3rem;
    --global-spacing-section: 2rem;
  }
}