heading.css

    --transform-skew-x: -6deg;
  }

  .xl\:hover\:-skew-x-3:hover {
    --transform-skew-x: -3deg;
  }

  .xl\:hover\:skew-y-0:hover {
    --transform-skew-y: 0;
  }

  .xl\:hover\:skew-y-3:hover {
    --transform-skew-y: 3deg;
  }

  .xl\:hover\:skew-y-6:hover {
    --transform-skew-y: 6deg;
  }

  .xl\:hover\:skew-y-12:hover {
    --transform-skew-y: 12deg;
  }

  .xl\:hover\:-skew-y-12:hover {
    --transform-skew-y: -12deg;
  }

  .xl\:hover\:-skew-y-6:hover {
    --transform-skew-y: -6deg;
  }

  .xl\:hover\:-skew-y-3:hover {
    --transform-skew-y: -3deg;
  }

  .xl\:focus\:skew-x-0:focus {
    --transform-skew-x: 0;
  }

  .xl\:focus\:skew-x-3:focus {
    --transform-skew-x: 3deg;
  }

  .xl\:focus\:skew-x-6:focus {
    --transform-skew-x: 6deg;
  }

  .xl\:focus\:skew-x-12:focus {
    --transform-skew-x: 12deg;
  }

  .xl\:focus\:-skew-x-12:focus {
    --transform-skew-x: -12deg;
  }

  .xl\:focus\:-skew-x-6:focus {
    --transform-skew-x: -6deg;
  }

  .xl\:focus\:-skew-x-3:focus {
    --transform-skew-x: -3deg;
  }

  .xl\:focus\:skew-y-0:focus {
    --transform-skew-y: 0;
  }

  .xl\:focus\:skew-y-3:focus {
    --transform-skew-y: 3deg;
  }

  .xl\:focus\:skew-y-6:focus {
    --transform-skew-y: 6deg;
  }

  .xl\:focus\:skew-y-12:focus {
    --transform-skew-y: 12deg;
  }

  .xl\:focus\:-skew-y-12:focus {
    --transform-skew-y: -12deg;
  }

  .xl\:focus\:-skew-y-6:focus {
    --transform-skew-y: -6deg;
  }

  .xl\:focus\:-skew-y-3:focus {
    --transform-skew-y: -3deg;
  }

  .xl\:transition-none {
    -webkit-transition-property: none;
    transition-property: none;
  }

  .xl\:transition-all {
    -webkit-transition-property: all;
    transition-property: all;
  }

  .xl\:transition {
    -webkit-transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform;
    transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, -webkit-box-shadow, -webkit-transform;
  }

  .xl\:transition-colors {
    -webkit-transition-property: background-color, border-color, color, fill, stroke;
    transition-property: background-color, border-color, color, fill, stroke;
  }

  .xl\:transition-opacity {
    -webkit-transition-property: opacity;
    transition-property: opacity;
  }

  .xl\:transition-shadow {
    -webkit-transition-property: -webkit-box-shadow;
    transition-property: -webkit-box-shadow;
    transition-property: box-shadow;
    transition-property: box-shadow, -webkit-box-shadow;
  }

  .xl\:transition-transform {
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
  }

  .xl\:ease-linear {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
  }

  .xl\:ease-in {
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }

  .xl\:ease-out {
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  .xl\:ease-in-out {
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .xl\:duration-75 {
    -webkit-transition-duration: 75ms;
    transition-duration: 75ms;
  }

  .xl\:duration-100 {
    -webkit-transition-duration: 100ms;
    transition-duration: 100ms;
  }

  .xl\:duration-150 {
    -webkit-transition-duration: 150ms;
    transition-duration: 150ms;
  }

  .xl\:duration-200 {
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
  }

  .xl\:duration-300 {
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
  }

  .xl\:duration-500 {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  .xl\:duration-700 {
    -webkit-transition-duration: 700ms;
    transition-duration: 700ms;
  }

  .xl\:duration-1000 {
    -webkit-transition-duration: 1000ms;
    transition-duration: 1000ms;
  }
}

:root {
  --brand-main: #0e688b;
  --brand-main-light: #107eab;
  --brand-main-active: #005379;
  --brand-main-dark: #003146;
  --brand-main-nearly-black: #000222;
  --grayscale-white: #fff;
  --grayscale-light: #f8f8f8;
  --grayscale-medium: #d2d2d2;
  --grayscale-medium-dark: #979797;
  --grayscale-dark: #555555;
  --grayscale-black: #000000;
  --additional-red-light: #E5053A;
  --additional-red-dark: #A31621;
  --additional-purple-light: #420039;
  --additional-yellow: #F9A21A;
  --additional-skyblue: #48C5F8;
  --additional-orange: #D14600;
  --additional-green-light: #96BA3C;
  --additional-green-dark: #006400;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@font-face {
  font-family: "Open Sans";

  font-weight: 400;

  font-style: normal;

  src: url("../fonts/Open-Sans-regular/Open-Sans-regular.eot");

  src: url("../fonts/Open-Sans-regular/Open-Sans-regular.eot?#iefix") format("embedded-opentype"), local("Open Sans"), local("Open-Sans-regular"), url("../fonts/Open-Sans-regular/Open-Sans-regular.ttf") format("truetype"), url("../fonts/Open-Sans-regular/Open-Sans-regular.woff2") format("woff2"), url("../fonts/Open-Sans-regular/Open-Sans-regular.woff") format("woff"), url("../fonts/Open-Sans-regular/Open-Sans-regular.svg#OpenSans") format("svg");
}

@font-face {
  font-family: "Open Sans";

  font-weight: 600;

  font-style: normal;

  src: url("../fonts/Open-Sans-600/Open-Sans-600.eot");

  src: url("../fonts/Open-Sans-600/Open-Sans-600.eot?#iefix") format("embedded-opentype"), local("Open Sans Semibold"), local("Open-Sans-600"), url("../fonts/Open-Sans-600/Open-Sans-600.ttf") format("truetype"), url("../fonts/Open-Sans-600/Open-Sans-600.woff2") format("woff2"), url("../fonts/Open-Sans-600/Open-Sans-600.woff") format("woff"), url("../fonts/Open-Sans-600/Open-Sans-600.svg#OpenSans") format("svg");
}

@font-face {
  font-family: "Open Sans";

  font-weight: 700;

  font-style: normal;

  src: url("../fonts/Open-Sans-700/Open-Sans-700.eot");

  src: url("../fonts/Open-Sans-700/Open-Sans-700.eot?#iefix") format("embedded-opentype"), local("Open Sans Bold"), local("Open-Sans-700"), url("../fonts/Open-Sans-700/Open-Sans-700.ttf") format("truetype"), url("../fonts/Open-Sans-700/Open-Sans-700.woff2") format("woff2"), url("../fonts/Open-Sans-700/Open-Sans-700.woff") format("woff"), url("../fonts/Open-Sans-700/Open-Sans-700.svg#OpenSans") format("svg");
}

:root {
  --base-font-size: 16px;
  --base-font-size-mobile: 14px;
  --main-font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --breakpoint-narrow: 30rem;
  --breakpoint-medium: 768px;
  --breakpoint-wide: 60rem;
  --breakpoint-extrawide: 75rem;
  --breakpoint-max-width: 75rem;
  --breakpoint-overwide: 80rem;
}

:host {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--brand-main-nearly-black);
  font-family: var(--main-font-family);
  font-weight: 600;
  padding: 0;
  margin: 0;
}

h1 {
  font-size: 32px;
  letter-spacing: -1px;
  line-height: 40px;
}

@media (min-width: 48em) {
  h1 {
    font-size: 48px;
    letter-spacing: -1.5px;
    line-height: 64px;
  }
}

h2 {
  font-size: 26px;
  letter-spacing: -0.82px;
  line-height: 32px;
}

@media (min-width: 48em) {
  h2 {
    font-size: 32px;
    letter-spacing: -1px;
    line-height: 40px;
  }
}

h3 {
  font-size: 22px;
  letter-spacing: -0.69px;
  line-height: 28px;
}

@media (min-width: 48em) {
  h3 {
    font-size: 26px;
    letter-spacing: -0.82px;
    line-height: 32px;
  }
}

h4 {
  font-size: 18px;
  letter-spacing: -0.56px;
  line-height: 24px;
}

@media (min-width: 48em) {
  h4 {
    font-size: 22px;
    letter-spacing: -0.69px;
    line-height: 28px;
  }
}

h5 {
  font-size: 16px;
  letter-spacing: -0.5px;
  line-height: 20px;
}

@media (min-width: 48em) {
  h5 {
    font-size: 18px;
    letter-spacing: -0.56px;
    line-height: 24px;
  }
}

h6 {
  font-size: 14px;
  letter-spacing: -0.44px;
  line-height: 16px;
}

@media (min-width: 48em) {
  h6 {
    font-size: 16px;
    letter-spacing: -0.5px;
    line-height: 20px;
  }
}