style.css

/* General */
/* Fonts */
/* bebas-neue-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/bebas-neue-v15-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("./fonts/bebas-neue-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/bebas-neue-v15-latin-regular.woff2") format("woff2"), url("./fonts/bebas-neue-v15-latin-regular.woff") format("woff"), url("./fonts/bebas-neue-v15-latin-regular.ttf") format("truetype"), url("./fonts/bebas-neue-v15-latin-regular.svg#BebasNeue") format("svg"); /* Legacy iOS */
}
/* public-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/public-sans-v20-latin-300.eot"); /* IE9 Compat Modes */
  src: url("./fonts/public-sans-v20-latin-300.eot?#iefix") format("embedded-opentype"), url("./fonts/public-sans-v20-latin-300.woff2") format("woff2"), url("./fonts/public-sans-v20-latin-300.woff") format("woff"), url("./fonts/public-sans-v20-latin-300.ttf") format("truetype"), url("./fonts/public-sans-v20-latin-300.svg#PublicSans") format("svg"); /* Legacy iOS */
}
/* public-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 300;
  src: url("./fonts/public-sans-v20-latin-300italic.eot"); /* IE9 Compat Modes */
  src: url("./fonts/public-sans-v20-latin-300italic.eot?#iefix") format("embedded-opentype"), url("./fonts/public-sans-v20-latin-300italic.woff2") format("woff2"), url("./fonts/public-sans-v20-latin-300italic.woff") format("woff"), url("./fonts/public-sans-v20-latin-300italic.ttf") format("truetype"), url("./fonts/public-sans-v20-latin-300italic.svg#PublicSans") format("svg"); /* Legacy iOS */
}
/* public-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/public-sans-v20-latin-600.eot"); /* IE9 Compat Modes */
  src: url("./fonts/public-sans-v20-latin-600.eot?#iefix") format("embedded-opentype"), url("./fonts/public-sans-v20-latin-600.woff2") format("woff2"), url("./fonts/public-sans-v20-latin-600.woff") format("woff"), url("./fonts/public-sans-v20-latin-600.ttf") format("truetype"), url("./fonts/public-sans-v20-latin-600.svg#PublicSans") format("svg"); /* Legacy iOS */
}
/* public-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 600;
  src: url("./fonts/public-sans-v20-latin-600italic.eot"); /* IE9 Compat Modes */
  src: url("./fonts/public-sans-v20-latin-600italic.eot?#iefix") format("embedded-opentype"), url("./fonts/public-sans-v20-latin-600italic.woff2") format("woff2"), url("./fonts/public-sans-v20-latin-600italic.woff") format("woff"), url("./fonts/public-sans-v20-latin-600italic.ttf") format("truetype"), url("./fonts/public-sans-v20-latin-600italic.svg#PublicSans") format("svg"); /* Legacy iOS */
}
/* public-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/public-sans-v20-latin-700.eot"); /* IE9 Compat Modes */
  src: url("./fonts/public-sans-v20-latin-700.eot?#iefix") format("embedded-opentype"), url("./fonts/public-sans-v20-latin-700.woff2") format("woff2"), url("./fonts/public-sans-v20-latin-700.woff") format("woff"), url("./fonts/public-sans-v20-latin-700.ttf") format("truetype"), url("./fonts/public-sans-v20-latin-700.svg#PublicSans") format("svg"); /* Legacy iOS */
}
/* public-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 700;
  src: url("./fonts/public-sans-v20-latin-700italic.eot"); /* IE9 Compat Modes */
  src: url("./fonts/public-sans-v20-latin-700italic.eot?#iefix") format("embedded-opentype"), url("./fonts/public-sans-v20-latin-700italic.woff2") format("woff2"), url("./fonts/public-sans-v20-latin-700italic.woff") format("woff"), url("./fonts/public-sans-v20-latin-700italic.ttf") format("truetype"), url("./fonts/public-sans-v20-latin-700italic.svg#PublicSans") format("svg"); /* Legacy iOS */
}
/* sour-gummy-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Sour Gummy";
  font-style: normal;
  font-weight: 200;
  src: url("./fonts/sour-gummy-v2-latin-200.eot"); /* IE9 Compat Modes */
  src: url("./fonts/sour-gummy-v2-latin-200.eot?#iefix") format("embedded-opentype"), url("./fonts/sour-gummy-v2-latin-200.woff2") format("woff2"), url("./fonts/sour-gummy-v2-latin-200.woff") format("woff"), url("./fonts/sour-gummy-v2-latin-200.ttf") format("truetype"), url("./fonts/sour-gummy-v2-latin-200.svg#SourGummy") format("svg"); /* Legacy iOS */
}
:root {
  --color-bg: #fff;
  --color-text: #222;
  --color-image-bg: #ddd;
  --color-primary: #3d53b1;
  --color-handwritten: #3d53b1;
  --color-project: var(--color-image-bg);
  --color-success: #006400;
  --color-success-contrast: #fff;
  --color-warning: #BA8E23;
  --color-success-contrast: #fff;
  --color-error: #8B0000;
  --color-error-contrast: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111;
    --color-text: #F0F0F0;
    --color-image-bg: #333;
    --color-primary: #498fd4;
    --color-handwritten: #498fd4;
    --color-success: #c3e3d1;
    --color-success-contrast: #000;
    --color-warning: #f3e2c0;
    --color-success-contrast: #000;
    --color-error: #efb1b2;
    --color-error-contrast: #000;
  }
}
@layer reset {
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol,
  ul {
    list-style: none;
  }
  blockquote,
  q {
    quotes: none;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/*------------------------------------*\
  #PAGE
\*------------------------------------*/
/**
 * Page-level styling (e.g. HTML and BODY elements).
 */
html,
body {
  height: 100%;
  font-size: 16px;
  line-height: 28px;
  font-family: "Public Sans", "Open Sans", sans-serif;
  font-weight: 300;
  background-color: var(--color-bg);
  color: var(--color-text);
}

html {
  scroll-behavior: auto;
}

header,
main,
footer {
  font-size: 18px;
  line-height: 28px;
  background-color: var(--color-bg);
}

/*------------------------------------*\
  #HEADINGS
\*------------------------------------*/
/**
 * Simple default styles for headings 1 through 6.
 */
h1,
h2,
h3 {
  font-family: "Bebas Neue", "Public Sans", "Open Sans", sans-serif;
  font-weight: 400;
  text-wrap-style: balance;
}

h4,
h5,
h6 {
  font-family: "Public Sans", "Open Sans", sans-serif;
  font-weight: 700;
}

h1 {
  font-size: 3rem;
  line-height: 3rem;
}
@media (min-width: 1200px) {
  h1 {
    font-size: 4.5rem;
    line-height: 4rem;
  }
}

h2 {
  font-size: 2.25rem;
  line-height: 2rem;
}
@media (min-width: 1200px) {
  h2 {
    font-size: 3.375rem;
    line-height: 3rem;
  }
}

h3 {
  font-size: 1.5rem;
  line-height: 1.5rem;
}
@media (min-width: 1200px) {
  h3 {
    font-size: 1.875rem;
    line-height: 2rem;
  }
}

h4 {
  font-size: 1.125rem;
  line-height: 1.5rem;
}
@media (min-width: 1200px) {
  h4 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

h5 {
  font-size: 1rem;
  line-height: 1.5rem;
}
@media (min-width: 1200px) {
  h5 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

h6 {
  font-size: 0.875rem;
  line-height: 1.5rem;
}
@media (min-width: 1200px) {
  h6 {
    font-size: 1rem;
    line-height: 1.75rem;
  }
}

a {
  color: var(--color-text);
  -webkit-text-decoration: underline currentColor;
          text-decoration: underline currentColor;
  text-underline-offset: 0.125rem;
  border: 0;
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-radius: 0.125rem;
  transition: outline-color 0.25s ease-in-out, -webkit-text-decoration 0.25s ease-in-out;
  transition: text-decoration 0.25s ease-in-out, outline-color 0.25s ease-in-out;
  transition: text-decoration 0.25s ease-in-out, outline-color 0.25s ease-in-out, -webkit-text-decoration 0.25s ease-in-out;
}
a:visited, a:active {
  color: var(--color-text);
}
a:hover, a:focus {
  color: var(--color-text);
  text-decoration-color: transparent;
}
a:focus-visible {
  outline-color: currentColor;
}

button {
  font-family: "Public Sans", "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 28px;
  outline: none;
}

small {
  font-size: 82.5%;
}

blockquote {
  display: block;
  padding-left: 1rem;
  border-left: 0.5rem solid var(--color-text);
}
blockquote p {
  display: inline;
}

sub,
sup {
  /* Specified in % so that the sup/sup is the
     right size relative to the surrounding text */
  font-size: 75%;
  /* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
  line-height: 0;
  /* Where the magic happens: makes all browsers position
     the sup/sup properly, relative to the surrounding text */
  position: relative;
  /* Note that if you're using Eric Meyer's reset.css, this
     is already set and you can remove this rule */
  vertical-align: baseline;
}

sup {
  /* Move the superscripted text up */
  top: -0.5em;
}

sub {
  /* Move the subscripted text down, but only
     half as far down as the superscript moved up */
  bottom: -0.25em;
}

em {
  font-style: italic;
}

i {
  font-style: italic;
}

b,
strong {
  font-family: "Public Sans", "Open Sans", sans-serif;
  font-weight: 700;
}

mark {
  background: var(--color-text);
  color: var(--color-bg);
}

::-moz-selection {
  background: var(--color-text);
  color: var(--color-bg);
}

::selection,
::-moz-selection {
  background: var(--color-text);
  color: var(--color-bg);
}

table {
  width: 100%;
  color: var(--color-text);
  vertical-align: top;
  caption-side: bottom;
  border-collapse: collapse;
  text-align: left;
}
.o-body.--main-nav-open {
  overflow: hidden;
}

.o-main {
  padding-top: 4rem;
  /* Do not show the outline on the skip link target. */
}
@media (min-width: 992px) {
  .o-main {
    padding-top: 5rem;
  }
}
body:not(:has(> header)) .o-main {
  padding-top: 0;
}
.o-main[tabindex="-1"]:focus {
  outline: 0;
}

.o-container,
.o-container-fluid,
.o-container--xxxl,
.o-container--xxl,
.o-container--xl,
.o-container--lg,
.o-container--md,
.o-container--sm {
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 36em) {
  .o-container--sm, .o-container {
    max-width: 544px;
  }
}
@media (min-width: 48em) {
  .o-container--md, .o-container--sm, .o-container {
    max-width: 726px;
  }
}
@media (min-width: 62em) {
  .o-container--lg, .o-container--md, .o-container--sm, .o-container {
    max-width: 960px;
  }
}
@media (min-width: 75em) {
  .o-container--xl, .o-container--lg, .o-container--md, .o-container--sm, .o-container {
    max-width: 1152px;
  }
}
@media (min-width: 87.5em) {
  .o-container--xxl, .o-container--xl, .o-container--lg, .o-container--md, .o-container--sm, .o-container {
    max-width: 1344px;
  }
}
@media (min-width: 100em) {
  .o-container--xxxl, .o-container--xxl, .o-container--xl, .o-container--lg, .o-container--md, .o-container--sm, .o-container {
    max-width: 1476px;
  }
}
.o-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -1rem;
  margin-left: -1rem;
}
.o-row.--position-left {
  justify-content: flex-start;
}
.o-row.--position-center {
  justify-content: center;
}
.o-row.--position-right {
  justify-content: flex-end;
}

.u-no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.u-no-gutters > .o-col,
.u-no-gutters > [class*=col-] {
  padding-right: 0;
  padding-left: 0;
}

.o-col-xxxl,
.o-col-xxxl-auto, .o-col-xxxl-12, .o-col-xxxl-11, .o-col-xxxl-10, .o-col-xxxl-9, .o-col-xxxl-8, .o-col-xxxl-7, .o-col-xxxl-6, .o-col-xxxl-5, .o-col-xxxl-4, .o-col-xxxl-3, .o-col-xxxl-2, .o-col-xxxl-1, .o-col-xxl,
.o-col-xxl-auto, .o-col-xxl-12, .o-col-xxl-11, .o-col-xxl-10, .o-col-xxl-9, .o-col-xxl-8, .o-col-xxl-7, .o-col-xxl-6, .o-col-xxl-5, .o-col-xxl-4, .o-col-xxl-3, .o-col-xxl-2, .o-col-xxl-1, .o-col-xl,
.o-col-xl-auto, .o-col-xl-12, .o-col-xl-11, .o-col-xl-10, .o-col-xl-9, .o-col-xl-8, .o-col-xl-7, .o-col-xl-6, .o-col-xl-5, .o-col-xl-4, .o-col-xl-3, .o-col-xl-2, .o-col-xl-1, .o-col-lg,
.o-col-lg-auto, .o-col-lg-12, .o-col-lg-11, .o-col-lg-10, .o-col-lg-9, .o-col-lg-8, .o-col-lg-7, .o-col-lg-6, .o-col-lg-5, .o-col-lg-4, .o-col-lg-3, .o-col-lg-2, .o-col-lg-1, .o-col-md,
.o-col-md-auto, .o-col-md-12, .o-col-md-11, .o-col-md-10, .o-col-md-9, .o-col-md-8, .o-col-md-7, .o-col-md-6, .o-col-md-5, .o-col-md-4, .o-col-md-3, .o-col-md-2, .o-col-md-1, .o-col-sm,
.o-col-sm-auto, .o-col-sm-12, .o-col-sm-11, .o-col-sm-10, .o-col-sm-9, .o-col-sm-8, .o-col-sm-7, .o-col-sm-6, .o-col-sm-5, .o-col-sm-4, .o-col-sm-3, .o-col-sm-2, .o-col-sm-1, .o-col,
.o-col-auto, .o-col-12, .o-col-11, .o-col-10, .o-col-9, .o-col-8, .o-col-7, .o-col-6, .o-col-5, .o-col-4, .o-col-3, .o-col-2, .o-col-1 {
  position: relative;
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
}

.o-col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.o-col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.o-col-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.o-col-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.o-col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.o-col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.o-col-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.o-col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.o-col-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.o-col-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.o-col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.o-col-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.o-col-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.o-col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.u-order-first {
  order: -1;
}

.u-order-last {
  order: 13;
}

.u-order-0 {
  order: 0;
}

.u-order-1 {
  order: 1;
}

.u-order-2 {
  order: 2;
}

.u-order-3 {
  order: 3;
}

.u-order-4 {
  order: 4;
}

.u-order-5 {
  order: 5;
}

.u-order-6 {
  order: 6;
}

.u-order-7 {
  order: 7;
}

.u-order-8 {
  order: 8;
}

.u-order-9 {
  order: 9;
}

.u-order-10 {
  order: 10;
}

.u-order-11 {
  order: 11;
}

.u-order-12 {
  order: 12;
}

.u-offset-1 {
  margin-left: 8.3333333333%;
}

.u-offset-2 {
  margin-left: 16.6666666667%;
}

.u-offset-3 {
  margin-left: 25%;
}

.u-offset-4 {
  margin-left: 33.3333333333%;
}

.u-offset-5 {
  margin-left: 41.6666666667%;
}

.u-offset-6 {
  margin-left: 50%;
}

.u-offset-7 {
  margin-left: 58.3333333333%;
}

.u-offset-8 {
  margin-left: 66.6666666667%;
}

.u-offset-9 {
  margin-left: 75%;
}

.u-offset-10 {
  margin-left: 83.3333333333%;
}

.u-offset-11 {
  margin-left: 91.6666666667%;
}

@media (min-width: 576px) {
  .o-col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .o-col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .o-col-sm-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .o-col-sm-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .o-col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .o-col-sm-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .o-col-sm-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .o-col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .o-col-sm-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .o-col-sm-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .o-col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .o-col-sm-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .o-col-sm-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .o-col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .u-order-sm-first {
    order: -1;
  }
  .u-order-sm-last {
    order: 13;
  }
  .u-order-sm-0 {
    order: 0;
  }
  .u-order-sm-1 {
    order: 1;
  }
  .u-order-sm-2 {
    order: 2;
  }
  .u-order-sm-3 {
    order: 3;
  }
  .u-order-sm-4 {
    order: 4;
  }
  .u-order-sm-5 {
    order: 5;
  }
  .u-order-sm-6 {
    order: 6;
  }
  .u-order-sm-7 {
    order: 7;
  }
  .u-order-sm-8 {
    order: 8;
  }
  .u-order-sm-9 {
    order: 9;
  }
  .u-order-sm-10 {
    order: 10;
  }
  .u-order-sm-11 {
    order: 11;
  }
  .u-order-sm-12 {
    order: 12;
  }
  .u-offset-sm-0 {
    margin-left: 0;
  }
  .u-offset-sm-1 {
    margin-left: 8.3333333333%;
  }
  .u-offset-sm-2 {
    margin-left: 16.6666666667%;
  }
  .u-offset-sm-3 {
    margin-left: 25%;
  }
  .u-offset-sm-4 {
    margin-left: 33.3333333333%;
  }
  .u-offset-sm-5 {
    margin-left: 41.6666666667%;
  }
  .u-offset-sm-6 {
    margin-left: 50%;
  }
  .u-offset-sm-7 {
    margin-left: 58.3333333333%;
  }
  .u-offset-sm-8 {
    margin-left: 66.6666666667%;
  }
  .u-offset-sm-9 {
    margin-left: 75%;
  }
  .u-offset-sm-10 {
    margin-left: 83.3333333333%;
  }
  .u-offset-sm-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 768px) {
  .o-col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .o-col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .o-col-md-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .o-col-md-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .o-col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .o-col-md-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .o-col-md-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .o-col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .o-col-md-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .o-col-md-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .o-col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .o-col-md-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .o-col-md-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .o-col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .u-order-md-first {
    order: -1;
  }
  .u-order-md-last {
    order: 13;
  }
  .u-order-md-0 {
    order: 0;
  }
  .u-order-md-1 {
    order: 1;
  }
  .u-order-md-2 {
    order: 2;
  }
  .u-order-md-3 {
    order: 3;
  }
  .u-order-md-4 {
    order: 4;
  }
  .u-order-md-5 {
    order: 5;
  }
  .u-order-md-6 {
    order: 6;
  }
  .u-order-md-7 {
    order: 7;
  }
  .u-order-md-8 {
    order: 8;
  }
  .u-order-md-9 {
    order: 9;
  }
  .u-order-md-10 {
    order: 10;
  }
  .u-order-md-11 {
    order: 11;
  }
  .u-order-md-12 {
    order: 12;
  }
  .u-offset-md-0 {
    margin-left: 0;
  }
  .u-offset-md-1 {
    margin-left: 8.3333333333%;
  }
  .u-offset-md-2 {
    margin-left: 16.6666666667%;
  }
  .u-offset-md-3 {
    margin-left: 25%;
  }
  .u-offset-md-4 {
    margin-left: 33.3333333333%;
  }
  .u-offset-md-5 {
    margin-left: 41.6666666667%;
  }
  .u-offset-md-6 {
    margin-left: 50%;
  }
  .u-offset-md-7 {
    margin-left: 58.3333333333%;
  }
  .u-offset-md-8 {
    margin-left: 66.6666666667%;
  }
  .u-offset-md-9 {
    margin-left: 75%;
  }
  .u-offset-md-10 {
    margin-left: 83.3333333333%;
  }
  .u-offset-md-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 992px) {
  .o-col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .o-col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .o-col-lg-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .o-col-lg-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .o-col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .o-col-lg-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .o-col-lg-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .o-col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .o-col-lg-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .o-col-lg-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .o-col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .o-col-lg-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .o-col-lg-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .o-col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .u-order-lg-first {
    order: -1;
  }
  .u-order-lg-last {
    order: 13;
  }
  .u-order-lg-0 {
    order: 0;
  }
  .u-order-lg-1 {
    order: 1;
  }
  .u-order-lg-2 {
    order: 2;
  }
  .u-order-lg-3 {
    order: 3;
  }
  .u-order-lg-4 {
    order: 4;
  }
  .u-order-lg-5 {
    order: 5;
  }
  .u-order-lg-6 {
    order: 6;
  }
  .u-order-lg-7 {
    order: 7;
  }
  .u-order-lg-8 {
    order: 8;
  }
  .u-order-lg-9 {
    order: 9;
  }
  .u-order-lg-10 {
    order: 10;
  }
  .u-order-lg-11 {
    order: 11;
  }
  .u-order-lg-12 {
    order: 12;
  }
  .u-offset-lg-0 {
    margin-left: 0;
  }
  .u-offset-lg-1 {
    margin-left: 8.3333333333%;
  }
  .u-offset-lg-2 {
    margin-left: 16.6666666667%;
  }
  .u-offset-lg-3 {
    margin-left: 25%;
  }
  .u-offset-lg-4 {
    margin-left: 33.3333333333%;
  }
  .u-offset-lg-5 {
    margin-left: 41.6666666667%;
  }
  .u-offset-lg-6 {
    margin-left: 50%;
  }
  .u-offset-lg-7 {
    margin-left: 58.3333333333%;
  }
  .u-offset-lg-8 {
    margin-left: 66.6666666667%;
  }
  .u-offset-lg-9 {
    margin-left: 75%;
  }
  .u-offset-lg-10 {
    margin-left: 83.3333333333%;
  }
  .u-offset-lg-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1200px) {
  .o-col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .o-col-xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .o-col-xl-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .o-col-xl-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .o-col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .o-col-xl-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .o-col-xl-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .o-col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .o-col-xl-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .o-col-xl-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .o-col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .o-col-xl-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .o-col-xl-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .o-col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .u-order-xl-first {
    order: -1;
  }
  .u-order-xl-last {
    order: 13;
  }
  .u-order-xl-0 {
    order: 0;
  }
  .u-order-xl-1 {
    order: 1;
  }
  .u-order-xl-2 {
    order: 2;
  }
  .u-order-xl-3 {
    order: 3;
  }
  .u-order-xl-4 {
    order: 4;
  }
  .u-order-xl-5 {
    order: 5;
  }
  .u-order-xl-6 {
    order: 6;
  }
  .u-order-xl-7 {
    order: 7;
  }
  .u-order-xl-8 {
    order: 8;
  }
  .u-order-xl-9 {
    order: 9;
  }
  .u-order-xl-10 {
    order: 10;
  }
  .u-order-xl-11 {
    order: 11;
  }
  .u-order-xl-12 {
    order: 12;
  }
  .u-offset-xl-0 {
    margin-left: 0;
  }
  .u-offset-xl-1 {
    margin-left: 8.3333333333%;
  }
  .u-offset-xl-2 {
    margin-left: 16.6666666667%;
  }
  .u-offset-xl-3 {
    margin-left: 25%;
  }
  .u-offset-xl-4 {
    margin-left: 33.3333333333%;
  }
  .u-offset-xl-5 {
    margin-left: 41.6666666667%;
  }
  .u-offset-xl-6 {
    margin-left: 50%;
  }
  .u-offset-xl-7 {
    margin-left: 58.3333333333%;
  }
  .u-offset-xl-8 {
    margin-left: 66.6666666667%;
  }
  .u-offset-xl-9 {
    margin-left: 75%;
  }
  .u-offset-xl-10 {
    margin-left: 83.3333333333%;
  }
  .u-offset-xl-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1400px) {
  .o-col-xxl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .o-col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .o-col-xxl-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .o-col-xxl-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .o-col-xxl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .o-col-xxl-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .o-col-xxl-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .o-col-xxl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .o-col-xxl-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .o-col-xxl-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .o-col-xxl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .o-col-xxl-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .o-col-xxl-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .o-col-xxl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .u-order-xxl-first {
    order: -1;
  }
  .u-order-xxl-last {
    order: 13;
  }
  .u-order-xxl-0 {
    order: 0;
  }
  .u-order-xxl-1 {
    order: 1;
  }
  .u-order-xxl-2 {
    order: 2;
  }
  .u-order-xxl-3 {
    order: 3;
  }
  .u-order-xxl-4 {
    order: 4;
  }
  .u-order-xxl-5 {
    order: 5;
  }
  .u-order-xxl-6 {
    order: 6;
  }
  .u-order-xxl-7 {
    order: 7;
  }
  .u-order-xxl-8 {
    order: 8;
  }
  .u-order-xxl-9 {
    order: 9;
  }
  .u-order-xxl-10 {
    order: 10;
  }
  .u-order-xxl-11 {
    order: 11;
  }
  .u-order-xxl-12 {
    order: 12;
  }
  .u-offset-xxl-0 {
    margin-left: 0;
  }
  .u-offset-xxl-1 {
    margin-left: 8.3333333333%;
  }
  .u-offset-xxl-2 {
    margin-left: 16.6666666667%;
  }
  .u-offset-xxl-3 {
    margin-left: 25%;
  }
  .u-offset-xxl-4 {
    margin-left: 33.3333333333%;
  }
  .u-offset-xxl-5 {
    margin-left: 41.6666666667%;
  }
  .u-offset-xxl-6 {
    margin-left: 50%;
  }
  .u-offset-xxl-7 {
    margin-left: 58.3333333333%;
  }
  .u-offset-xxl-8 {
    margin-left: 66.6666666667%;
  }
  .u-offset-xxl-9 {
    margin-left: 75%;
  }
  .u-offset-xxl-10 {
    margin-left: 83.3333333333%;
  }
  .u-offset-xxl-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1600px) {
  .o-col-xxxl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .o-col-xxxl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .o-col-xxxl-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .o-col-xxxl-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .o-col-xxxl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .o-col-xxxl-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .o-col-xxxl-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .o-col-xxxl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .o-col-xxxl-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .o-col-xxxl-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .o-col-xxxl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .o-col-xxxl-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .o-col-xxxl-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .o-col-xxxl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .u-order-xxxl-first {
    order: -1;
  }
  .u-order-xxxl-last {
    order: 13;
  }
  .u-order-xxxl-0 {
    order: 0;
  }
  .u-order-xxxl-1 {
    order: 1;
  }
  .u-order-xxxl-2 {
    order: 2;
  }
  .u-order-xxxl-3 {
    order: 3;
  }
  .u-order-xxxl-4 {
    order: 4;
  }
  .u-order-xxxl-5 {
    order: 5;
  }
  .u-order-xxxl-6 {
    order: 6;
  }
  .u-order-xxxl-7 {
    order: 7;
  }
  .u-order-xxxl-8 {
    order: 8;
  }
  .u-order-xxxl-9 {
    order: 9;
  }
  .u-order-xxxl-10 {
    order: 10;
  }
  .u-order-xxxl-11 {
    order: 11;
  }
  .u-order-xxxl-12 {
    order: 12;
  }
  .u-offset-xxxl-0 {
    margin-left: 0;
  }
  .u-offset-xxxl-1 {
    margin-left: 8.3333333333%;
  }
  .u-offset-xxxl-2 {
    margin-left: 16.6666666667%;
  }
  .u-offset-xxxl-3 {
    margin-left: 25%;
  }
  .u-offset-xxxl-4 {
    margin-left: 33.3333333333%;
  }
  .u-offset-xxxl-5 {
    margin-left: 41.6666666667%;
  }
  .u-offset-xxxl-6 {
    margin-left: 50%;
  }
  .u-offset-xxxl-7 {
    margin-left: 58.3333333333%;
  }
  .u-offset-xxxl-8 {
    margin-left: 66.6666666667%;
  }
  .u-offset-xxxl-9 {
    margin-left: 75%;
  }
  .u-offset-xxxl-10 {
    margin-left: 83.3333333333%;
  }
  .u-offset-xxxl-11 {
    margin-left: 91.6666666667%;
  }
}
.o-section {
  scroll-margin-top: 4rem;
  scroll-snap-align: start;
  padding-block: 6rem;
}
@media (min-width: 1200px) {
  .o-section {
    scroll-margin-top: 5rem;
    padding-block: 10rem;
  }
}
.o-section + .o-section {
  padding-top: 0;
}

.c-subheadline {
  font-family: "Public Sans", "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 24px;
}
@media (min-width: 1200px) {
  .c-subheadline {
    margin-bottom: -0.5rem;
  }
}

.c-headline.--h1 {
  font-size: 3rem;
  line-height: 3rem;
}
@media (min-width: 1200px) {
  .c-headline.--h1 {
    font-size: 4.5rem;
    line-height: 4rem;
  }
}
.c-headline.--h2 {
  font-size: 2.25rem;
  line-height: 2rem;
}
@media (min-width: 1200px) {
  .c-headline.--h2 {
    font-size: 3.375rem;
    line-height: 3rem;
  }
}
.c-headline.--h3 {
  font-size: 1.5rem;
  line-height: 1.5rem;
}
@media (min-width: 1200px) {
  .c-headline.--h3 {
    font-size: 1.875rem;
    line-height: 2rem;
  }
}
.c-headline.--h4 {
  font-size: 1.125rem;
  line-height: 1.5rem;
}
@media (min-width: 1200px) {
  .c-headline.--h4 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
.c-headline.--h5 {
  font-size: 1rem;
  line-height: 1.5rem;
}
@media (min-width: 1200px) {
  .c-headline.--h5 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
.c-headline.--h6 {
  font-size: 0.875rem;
  line-height: 1.5rem;
}
@media (min-width: 1200px) {
  .c-headline.--h6 {
    font-size: 1rem;
    line-height: 1.75rem;
  }
}
.c-headline.--span {
  display: inline-block;
}

.c-wysiwyg {
  /**
  * For nested lists
  */
}
.c-wysiwyg > *:first-child {
  margin-top: 0;
}
.c-wysiwyg > *:last-child {
  margin-bottom: 0;
}
.c-wysiwyg h1 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
@media (min-width: 1200px) {
  .c-wysiwyg h1 {
    margin-top: 4rem;
    margin-bottom: 2rem;
  }
}
.c-wysiwyg h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
@media (min-width: 1200px) {
  .c-wysiwyg h2 {
    margin-top: 4rem;
    margin-bottom: 2rem;
  }
}
.c-wysiwyg h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
@media (min-width: 1200px) {
  .c-wysiwyg h3 {
    margin-top: 4rem;
    margin-bottom: 2rem;
  }
}
.c-wysiwyg h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.c-wysiwyg h5 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.c-wysiwyg h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.c-wysiwyg p {
  margin-bottom: 1rem;
}
.c-wysiwyg ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.c-wysiwyg ul > li {
  list-style-type: none;
  position: relative;
  padding-left: 0;
}
.c-wysiwyg ul > li:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  left: -1.5rem;
  top: calc(14px - 0.25rem);
  width: 0.5rem;
  height: 0.5rem;
  color: var(--color-primary);
  background: currentColor;
}
.c-wysiwyg ul > li > li:before {
  border: 2px solid currentColor;
  background: transparent;
}
.c-wysiwyg ol {
  list-style-type: none;
  counter-reset: numbers;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0;
  margin-bottom: 1rem;
}
.c-wysiwyg ol > li {
  position: relative;
  counter-increment: numbers;
  padding-left: calc(1rem + 1ch);
}
.c-wysiwyg ol > li:before {
  content: counters(numbers, ".") " ";
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  color: var(--color-primary);
  font-family: "Public Sans", "Open Sans", sans-serif;
  font-weight: 700;
  left: 0;
}
.c-wysiwyg ol > li ol,
.c-wysiwyg ul > li ol {
  margin-top: 0.5rem;
}
.c-wysiwyg ol > li ol > li,
.c-wysiwyg ul > li ol > li {
  /**
  * calculate position by amount of characters in counter,
  * every digit corresponds 1ch and every dot corresponds 0.5ch
  * example: 2.1.1 = 4ch
  **/
  padding-left: calc(1rem + 2.5ch);
}
.c-wysiwyg ol > li ol > li ol > li,
.c-wysiwyg ul > li ol > li ol > li {
  padding-left: calc(1rem + 4ch);
}
.c-wysiwyg ol > li ol > li ol > li ol > li,
.c-wysiwyg ul > li ol > li ol > li ol > li {
  padding-left: calc(1rem + 5.5ch);
}
.c-wysiwyg ol > li ol > li ol > li ol > li ol > li,
.c-wysiwyg ul > li ol > li ol > li ol > li ol > li {
  padding-left: calc(1rem + 7ch);
}
.c-wysiwyg ol > li ul,
.c-wysiwyg ul > li ul {
  margin-top: 0.5rem;
}
.c-wysiwyg.--balanced {
  text-wrap: balance;
}

.c-figure__placeholder {
  width: 100%;
  height: auto;
  background-color: var(--color-image-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.--circle .c-figure__placeholder {
  border-radius: 50%;
  aspect-ratio: 1/1;
}
.c-figure__icon {
  width: min(50%, 10rem);
  height: min(50%, 10rem);
  color: var(--color-bg);
}
.c-picture {
  display: block;
  width: 100%;
  height: auto;
  line-height: 0;
}

.c-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

.c-button {
  display: inline-block;
  position: relative;
  font-family: "Public Sans", "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 24px;
  text-align: center;
  margin: 0;
  padding: 0.5rem 2rem;
  color: var(--color-bg);
  background: var(--color-text);
  border: 2px solid var(--color-text);
  border-radius: 0.125rem;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  overflow: hidden;
  z-index: 1;
  transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, outline-color 0.25s ease-in-out, opacity 0.25s ease-in-out, -webkit-text-decoration 0.25s ease-in-out;
  transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, text-decoration 0.25s ease-in-out, outline-color 0.25s ease-in-out, opacity 0.25s ease-in-out;
  transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, text-decoration 0.25s ease-in-out, outline-color 0.25s ease-in-out, opacity 0.25s ease-in-out, -webkit-text-decoration 0.25s ease-in-out;
  cursor: pointer;
}
.c-button:visited, .c-button:active {
  color: var(--color-bg);
  background: var(--color-text);
  border-color: var(--color-text);
}
.c-button:hover {
  color: var(--color-bg);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.c-button:focus-visible {
  outline-color: var(--color-text);
}
.c-button:disabled {
  opacity: 0.4;
  outline-color: transparent;
  cursor: default;
}
.c-button.--ghost {
  color: var(--color-text);
  background: transparent;
}
.c-button.--ghost:hover {
  color: var(--color-bg);
  background: var(--color-text);
  border-color: var(--color-text);
}
.c-button.--link {
  -webkit-text-decoration: underline currentColor;
          text-decoration: underline currentColor;
  text-underline-offset: 0.125rem;
  border-color: transparent;
  color: var(--color-text);
  background-color: transparent;
}
.c-button.--link::after {
  content: none;
}
.c-button.--link:hover {
  text-decoration-color: transparent;
}
.c-button.--link:focus-visible {
  text-decoration-color: transparent;
}

.c-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 2rem;
  height: 2rem;
  color: var(--color-bg);
  background: var(--color-text);
  border: 2px solid var(--color-text);
  border-radius: 0.125rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
  overflow: hidden;
  z-index: 1;
  transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, outline-color 0.25s ease-in-out, opacity 0.25s ease-in-out;
  cursor: pointer;
}
.c-icon-button:visited, .c-icon-button:active {
  color: var(--color-bg);
  background: var(--color-text);
  border-color: var(--color-text);
}
.c-icon-button:hover {
  color: var(--color-bg);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.c-icon-button:focus-visible {
  outline-color: var(--color-text);
}
.c-icon-button:disabled {
  opacity: 0.4;
  outline-color: transparent;
  cursor: default;
}
.c-icon-button__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.c-button-group {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
@media (min-width: 768px) {
  .c-button-group {
    flex-direction: row;
  }
}
.c-button-group.--position-center {
  justify-content: center;
}
.c-button-group.--full-width {
  align-items: stretch;
  flex-direction: column;
}
@media (min-width: 768px) {
  .c-button-group.--full-width {
    flex-direction: row;
  }
}
.--full-width .c-button-group__item {
  width: 100%;
}

/* Form */
.c-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Fieldset & legend */
.c-fieldset {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* Input group */
.c-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.c-input-group__error {
  color: var(--color-error);
}
.c-input-group__error:not([hidden]) {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.c-input-group__error-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  position: relative;
  bottom: -0.125rem;
}
/* Input */
.c-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.25rem 0.75rem;
  resize: vertical;
  font-family: inherit;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  border-radius: 0.25rem;
  outline: 2px solid transparent;
  -moz-appearance: textfield;
  transition: outline-color 0.25s ease-in-out, border-color 0.25s ease-in-out;
  height: 2.375rem;
}
.c-input:focus, .c-input:focus-visible {
  outline-color: var(--color-primary);
  border-color: var(--color-primary);
}
.c-input::-moz-placeholder {
  color: var(--color-image-bg);
  font-weight: 300;
  opacity: 1;
}
.c-input::placeholder {
  color: var(--color-image-bg);
  font-weight: 300;
  opacity: 1;
}
.c-input.--success {
  outline-color: var(--color-success);
  border-color: var(--color-success);
}
.c-input.--error {
  outline-color: var(--color-error);
  border-color: var(--color-error);
}

/* Select */
.c-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.25rem 0.75rem;
  resize: vertical;
  font-family: inherit;
  font-size: 100%;
  line-height: 28px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  border-radius: 0.25rem;
  outline: 2px solid transparent;
  transition: outline-color 0.25s ease-in-out, border-color 0.25s ease-in-out;
}
.c-select:focus, .c-select:focus-visible {
  outline-color: var(--color-primary);
  border-color: var(--color-primary);
}
.c-select option[value=""] {
  color: var(--color-image-bg);
}
.c-select option:checked {
  background-color: var(--color-text);
}
.c-select.--single {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: 1.25rem;
  background-repeat: no-repeat;
  background-position: calc(100% - 0.75rem) center;
  padding-right: 2.75rem;
}
.c-select.--multiple {
  max-height: 2.375rem;
}
.c-select.--success {
  outline-color: var(--color-success);
  border-color: var(--color-success);
}
.c-select.--error {
  outline-color: var(--color-error);
  border-color: var(--color-error);
}

/* Textarea */
.c-textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.25rem 0.75rem;
  min-height: calc(140px + 0.5rem);
  max-height: 60vh;
  resize: vertical;
  font-family: inherit;
  font-size: 100%;
  line-height: 28px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  border-radius: 0.25rem;
  outline: 2px solid transparent;
  transition: outline-color 0.25s ease-in-out, border-color 0.25s ease-in-out;
}
.c-textarea:focus, .c-textarea:focus-visible {
  outline-color: var(--color-primary);
  border-color: var(--color-primary);
}
.c-textarea::-moz-placeholder {
  color: var(--color-image-bg);
  font-weight: 300;
  opacity: 1;
}
.c-textarea::placeholder {
  color: var(--color-image-bg);
  font-weight: 300;
  opacity: 1;
}
.c-textarea.--success {
  outline-color: var(--color-success);
  border-color: var(--color-success);
}
.c-textarea.--error {
  outline-color: var(--color-error);
  border-color: var(--color-error);
}

/* Label */
.c-label {
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: inherit;
}
/* Control */
.c-control {
  position: relative;
  margin: 0;
  box-sizing: border-box;
}
.c-control__input {
  position: absolute;
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  left: 0;
  bottom: -0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.c-control__label {
  display: flex;
  align-items: baseline;
  position: relative;
  -webkit-hyphens: auto;
          hyphens: auto;
}
.c-control__label:before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-right: 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  border-radius: 0.125rem;
  outline: 2px solid transparent;
  position: relative;
  bottom: -0.25rem;
  border: 1px solid var(--color-text);
  outline: 2px solid transparent;
  transition: outline 0.25s ease-in-out, border 0.25s ease-in-out, background-color 0.25s ease-in-out;
  color: var(--color-text);
}
.c-control__label:after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0.375rem;
  left: 0.125rem;
  background-color: var(--color-text);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0.125rem;
  transform: scale(0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 0.875rem;
          mask-size: 0.875rem;
  -webkit-mask-position: center;
          mask-position: center;
  transition: transform 0.25s ease-in-out, background-color 0.25s ease-in-out;
}
.c-control__input.--radio + .c-control__label:before {
  border-radius: 100%;
}
.c-control__input.--radio + .c-control__label:after {
  -webkit-mask: none;
          mask: none;
  border-radius: 100%;
}
.c-control__input:checked + .c-control__label:after {
  transform: scale(1);
}
.c-control__input:focus + .c-control__label:before, .c-control__input:focus-visible + .c-control__label:before {
  outline-color: var(--color-primary);
  border-color: var(--color-primary);
}

.c-info-messages {
  font-family: "Public Sans", "Open Sans", sans-serif;
  font-weight: 700;
  padding: 0.5rem 1rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 2px solid currentColor;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.c-info-messages__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  position: relative;
  bottom: -0.125rem;
}
.c-info-messages.--is-success {
  color: var(--color-success-contrast);
  background-color: var(--color-success);
}
.c-info-messages.--is-warning {
  color: var(--color-warning-contrast);
  background-color: var(--color-warning);
}
.c-info-messages.--is-error {
  color: var(--color-error-contrast);
  background-color: var(--color-error);
}

.c-header {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
  background: var(--color-bg);
  padding-block: 1rem;
  border-bottom: 2px solid var(--color-text);
}
.c-header__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.c-header__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.c-header__logo-link {
  display: flex;
  text-decoration: none;
}
.c-header__logo-text {
  font-family: "Public Sans", "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.5rem;
}
@media (min-width: 1200px) {
  .c-header__logo-text {
    font-size: 1.875rem;
    line-height: 2rem;
  }
}
.c-footer {
  padding-top: 6rem;
}
@media (min-width: 1200px) {
  .c-footer {
    padding-top: 10rem;
  }
}
.c-footer__top {
  padding-bottom: 1rem;
  display: flex;
  justify-content: center;
}
.c-footer__bottom {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 0.5rem;
  padding-block: 1rem;
  border-top: 2px solid var(--color-text);
}
@media (min-width: 1200px) {
  .c-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: 2rem;
  }
}
.c-main-nav__button {
  display: flex;
}
@media (min-width: 992px) {
  .c-main-nav__button {
    display: none;
  }
}
.c-main-nav__button-icon.--close {
  display: none;
}
.--open .c-main-nav__button-icon.--close {
  display: flex;
}
.c-main-nav__button-icon.--open {
  display: flex;
}
.--open .c-main-nav__button-icon.--open {
  display: none;
}
.c-main-nav__list {
  position: fixed;
  left: 100%;
  width: 100%;
  height: calc(100dvh - 4rem);
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem 1rem;
  margin-top: calc(1rem + 2px);
  overflow-y: auto;
  z-index: -1;
  pointer-events: none;
  transition: transform 0.25s ease-in-out;
}
@media (min-width: 992px) {
  .c-main-nav__list {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    left: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    overflow: visible;
    z-index: auto;
    pointer-events: auto;
    transition: none;
  }
}
.--open .c-main-nav__list {
  transform: translateX(-100%);
  pointer-events: auto;
}
.c-main-nav__link {
  display: flex;
  padding: 0.5rem;
  border-radius: 0.125rem;
}
.--active .c-main-nav__link {
  border: 2px solid var(--color-text);
  text-decoration-color: transparent;
}
.c-footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
}
@media (min-width: 1200px) {
  .c-footer-nav__list {
    justify-content: flex-end;
  }
}
.c-skip-link {
  display: inline-block;
  position: relative;
  top: 1rem;
  left: 1rem;
  font-family: "Public Sans", "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 24px;
  text-align: center;
  margin: 0;
  padding: 0.5rem 2rem;
  color: var(--color-bg);
  background: var(--color-text);
  border: 2px solid var(--color-text);
  border-radius: 0.125rem;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  overflow: hidden;
  z-index: 1;
  transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, outline-color 0.25s ease-in-out, opacity 0.25s ease-in-out, -webkit-text-decoration 0.25s ease-in-out;
  transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, text-decoration 0.25s ease-in-out, outline-color 0.25s ease-in-out, opacity 0.25s ease-in-out;
  transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, text-decoration 0.25s ease-in-out, outline-color 0.25s ease-in-out, opacity 0.25s ease-in-out, -webkit-text-decoration 0.25s ease-in-out;
  cursor: pointer;
}
.c-skip-link:focus-visible {
  color: var(--color-bg);
  background: var(--color-text);
  border-color: var(--color-text);
  outline-color: var(--color-text);
  padding: 0.5rem 2rem;
}

.c-handwritten {
  font-family: "Sour Gummy", "Public Sans", "Open Sans", sans-serif;
  font-weight: 200;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  word-spacing: 0.05em;
  color: var(--color-handwritten);
  position: absolute;
  width: min(50%, 10rem);
}
.c-handwritten__icon {
  position: absolute;
  color: currentColor;
  width: 4rem;
  height: 4rem;
}
.c-handwritten.--logo {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.25rem;
  align-items: center;
  justify-content: flex-start;
}
.c-handwritten.--logo .c-handwritten__icon {
  position: relative;
  width: 2rem;
  height: 2rem;
  rotate: -90deg;
}
.c-handwritten.--profile {
  bottom: 100%;
  left: -0.5rem;
}
.c-handwritten.--profile .c-handwritten__icon {
  top: calc(100% + 0.25rem);
  rotate: -90deg;
}
.c-handwritten.--hero {
  position: relative;
  top: 0.25rem;
  width: 100%;
  display: grid;
  grid-template-columns: 2rem minmax(0, 12rem);
  gap: 0.5rem;
}
.c-handwritten.--hero .c-handwritten__icon {
  position: relative;
  width: 2rem;
  height: 2rem;
}
.c-handwritten.--timeline {
  bottom: calc(100% + 1rem);
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 2rem minmax(0, 12rem);
  gap: 0.25rem;
  align-items: end;
}
.c-handwritten.--timeline .c-handwritten__icon {
  position: relative;
  width: 2rem;
  height: 2rem;
  scale: 1 -1;
}
.c-handwritten.--post {
  top: -2rem;
  right: 1rem;
  width: auto;
}
.c-handwritten.--post .c-handwritten__icon {
  top: calc(100% + 0.25rem);
  right: 2rem;
  rotate: -90deg;
  scale: 1 -1;
}
.c-handwritten.--footer {
  width: 100%;
  bottom: calc(100% + 0.5rem);
  left: 0;
}
.c-handwritten.--footer .c-handwritten__icon {
  width: 2rem;
  height: auto;
  top: 0.5rem;
  left: -2.5rem;
  scale: 1 -1;
  rotate: 22.5deg;
}

.c-text__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 1200px) {
  .c-text__content {
    gap: 2rem;
  }
}
.c-hero {
  padding-top: 6rem;
}
@media (min-width: 1200px) {
  .c-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 70dvh;
    padding-block: 10rem;
  }
}
.c-hero__row {
  display: flex;
  flex-direction: column;
  gap: 4rem 2rem;
}
.c-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 1200px) {
  .c-hero__content {
    gap: 2rem;
  }
}
.c-hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  display: flex;
}
@media (min-width: 1200px) {
  .c-hero__image {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 1rem);
    height: 100%;
    aspect-ratio: inherit;
  }
}

.c-about {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 1200px) {
  .c-about {
    gap: 4rem;
  }
}
.c-about__row {
  display: flex;
  gap: 2rem 0;
}
@media (min-width: 1200px) {
  .c-about__row {
    gap: 0;
  }
}
.c-about__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.c-profile {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 1200px) {
  .c-profile {
    gap: 4rem;
  }
}
.c-profile__row {
  display: flex;
  gap: 2rem 0;
}
@media (min-width: 1200px) {
  .c-profile__row {
    gap: 0;
  }
}
.c-profile__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.c-skills-teaser__row {
  display: flex;
  flex-direction: column;
  gap: 4rem 2rem;
}
@media (min-width: 768px) {
  .c-skills-teaser__row {
    flex-direction: row;
    gap: 0;
  }
}
.c-skills-teaser__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 1200px) {
  .c-skills-teaser__content {
    gap: 2rem;
  }
}
.c-skills-teaser__cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 768px) {
  .c-skills-teaser__cards {
    margin-top: calc(24px + 1rem);
  }
}
@media (min-width: 1200px) {
  .c-skills-teaser__cards {
    gap: 4rem;
    margin-top: calc(24px + 2rem);
  }
}

.c-skill-teaser-card {
  --icon-column: 4rem;
  --column-gap: 1rem;
  --row-gap: 0.5rem;
  --card-gap: 2rem;
  display: grid;
  grid-template-columns: var(--icon-column) 1fr;
  gap: var(--row-gap) var(--column-gap);
}
@media (min-width: 1200px) {
  .c-skill-teaser-card {
    --icon-column: 6rem;
    --column-gap: 2rem;
    --row-gap: 1rem;
    --card-gap: 4rem;
  }
}
.c-skill-teaser-card__header {
  grid-column: 1/-1;
  display: contents;
}
.c-skill-teaser-card__icon {
  grid-column: 1;
  width: 1.5rem;
  height: 1.5rem;
  align-self: center;
  justify-self: center;
}
@media (min-width: 1200px) {
  .c-skill-teaser-card__icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.c-skill-teaser-card__headline {
  grid-column: 2;
  align-self: center;
}
.c-skill-teaser-card__content {
  grid-column: 2;
  position: relative;
}
.c-skill-teaser-card:not(:last-child) .c-skill-teaser-card__content::after {
  content: "";
  display: block;
  position: absolute;
  left: calc(-1px - (var(--icon-column) / 2 + var(--column-gap)));
  top: 0;
  width: 2px;
  height: calc(100% + var(--card-gap) - var(--row-gap));
  background-color: var(--color-text);
}

.c-skills {
  display: flex;
  flex-direction: column;
  gap: 4rem 2rem;
}
@media (min-width: 768px) {
  .c-skills {
    gap: 6rem;
  }
}
.c-skills__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 1200px) {
  .c-skills__content {
    gap: 2rem;
  }
}
.c-skills__cards {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
@media (min-width: 768px) {
  .c-skills__cards {
    gap: 6rem;
  }
}

.c-skill-card {
  display: flex;
  flex-direction: column;
  gap: 2rem 0;
}
@media (min-width: 768px) {
  .c-skill-card {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.c-skill-card__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.c-skill-card__icon {
  width: 1.5rem;
  height: 1.5rem;
}
@media (min-width: 1200px) {
  .c-skill-card__icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.c-skill-card__wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 1200px) {
  .c-skill-card__wrapper {
    gap: 1rem;
  }
}
.c-skill-card__subheadline {
  border-top: 2px solid var(--color-text);
  padding-top: 1rem;
}
.c-skill-card__list.--pills {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
@media (min-width: 576px) {
  .c-skill-card__list.--pills {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.--pills .c-skill-card__list-item {
  padding: 0.25rem 0.5rem;
  background: var(--color-image-bg);
}

.c-portfolio {
  display: flex;
  flex-direction: column;
  gap: 4rem 2rem;
}
@media (min-width: 768px) {
  .c-portfolio {
    gap: 6rem;
  }
}
.c-portfolio__row {
  display: flex;
  flex-direction: column;
  gap: 4rem 2rem;
}
@media (min-width: 768px) {
  .c-portfolio__row {
    flex-direction: row;
    gap: 0;
  }
}
.c-portfolio__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
@media (min-width: 1200px) {
  .c-portfolio__content {
    gap: 2rem;
  }
}
.c-portfolio__cards {
  gap: 4rem 0;
}
@media (min-width: 1200px) {
  .c-portfolio__cards {
    gap: 6rem 0;
  }
}
.c-timeline {
  display: flex;
  flex-direction: column;
  gap: 4rem 2rem;
}
@media (min-width: 768px) {
  .c-timeline {
    gap: 6rem;
  }
}
.c-timeline__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
@media (min-width: 1200px) {
  .c-timeline__content {
    gap: 2rem;
  }
}
.c-timeline__cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}
.c-timeline__cards::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(1rem + 1px + 0.5rem);
  top: 0;
  width: 2px;
  height: 100%;
  background-color: var(--color-text);
}
@media (min-width: 1200px) {
  .c-timeline__cards::before {
    left: calc(50% - 1px);
  }
}

.c-timeline-card {
  --box-padding: 1rem;
  --icon-column: 2.5rem;
  --icon-size: 1rem;
  --column-gap: 1rem;
  --row-gap: 0.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--row-gap) var(--column-gap);
  margin-left: var(--icon-column);
  padding: var(--box-padding);
}
@media (min-width: 1200px) {
  .c-timeline-card {
    border: 2px solid var(--color-text);
  }
}
.c-timeline-card::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(0px - var(--icon-column));
  top: calc(var(--box-padding) + 14px - var(--icon-size) / 2);
  border-radius: 50%;
  width: var(--icon-size);
  height: var(--icon-size);
  background-color: var(--color-text);
}
@media (min-width: 1200px) {
  .c-timeline-card::before {
    left: calc(-2px - var(--icon-column) - var(--icon-size) / 2);
  }
}
@media (min-width: 1200px) {
  .c-timeline-card {
    --box-padding: 2rem;
    --icon-column: 6rem;
    --icon-size: 1.5rem;
    --column-gap: 2rem;
    --row-gap: 1rem;
    margin-inline: calc(50% + var(--icon-column)) 0;
  }
}
@media (min-width: 1200px) {
  .c-timeline-card:nth-child(odd) {
    margin-inline: 0 calc(50% + var(--icon-column));
  }
}
@media (min-width: 1200px) {
  .c-timeline-card:nth-child(odd)::before {
    left: auto;
    right: calc(-2px - var(--icon-column) - var(--icon-size) / 2);
  }
}
.c-timeline-card__date {
  justify-self: center;
}
.c-timeline-card__roles {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  padding-left: var(--box-padding);
}
@media (min-width: 1200px) {
  .c-timeline-card__roles {
    gap: 0.75rem;
  }
}
.c-timeline-card__roles::before {
  content: "";
  display: block;
  width: 2px;
  position: absolute;
  background: color-mix(in srgb, var(--color-text) 66.6666%, var(--color-bg) 33.3333%);
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
}
.c-timeline-card__role {
  display: flex;
  flex-direction: column;
}
.c-timeline-card__role-date {
  font-size: 0.9375rem;
  line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 66.6666%, var(--color-bg) 33.3333%);
}
.c-timeline-card.--future {
  margin-top: 2.5rem;
}

.c-post__header {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-project) 50%, var(--color-image-bg) 50%);
  padding: 0;
}
@media (min-width: 1200px) {
  .c-post__header {
    height: 70dvh;
  }
}
.c-post__header.--screen {
  padding: 2rem;
}
@media (min-width: 1200px) {
  .c-post__header.--screen {
    padding: 4rem 20dvw;
  }
}
.c-post__header-picture {
  display: flex;
}
.--screen .c-post__header-picture {
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  overflow: hidden;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16/9;
}
.c-post__header-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.c-post__container {
  display: flex;
  flex-direction: column;
  padding-block: 4rem 6rem;
  gap: 4rem;
}
@media (min-width: 1200px) {
  .c-post__container {
    padding-block: 6rem 10rem;
    gap: 6rem;
  }
}
.c-post__row {
  gap: 1rem 0;
}
@media (min-width: 1200px) {
  .c-post__row {
    gap: 0;
  }
}
.c-post__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 1200px) {
  .c-post__content {
    gap: 2rem;
  }
}
.c-post__infos {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 0.5rem;
  border-top: 2px solid var(--color-text);
}
.c-post__info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  border-bottom: 2px solid var(--color-text);
  padding-block: 1rem;
}
.c-post__info-label {
  font-family: "Public Sans", "Open Sans", sans-serif;
  font-weight: 700;
}
.c-post__disclaimer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: color-mix(in srgb, var(--color-text) 66.6666%, var(--color-bg) 33.3333%);
  font-size: 0.9375rem;
  line-height: 24px;
}
.c-post__disclaimer-icon {
  width: 1rem;
  height: 1rem;
  align-self: baseline;
  position: relative;
  top: 0.25rem;
  stroke-width: 1;
}
.c-post__visuals {
  display: flex;
  flex-direction: column;
  gap: 2rem 0;
}
@media (min-width: 768px) {
  .c-post__visuals {
    flex-direction: row;
    gap: 2rem 0;
  }
}
@media (min-width: 1200px) {
  .c-post__visuals {
    gap: 4rem 0;
  }
}
.c-post__visual-wrapper.--screen:nth-child(2n+1 of .c-post__visual-wrapper.--screen) .c-post__visual {
  background: color-mix(in srgb, var(--color-bg) 66.6666%, var(--color-image-bg) 33.3333%);
}
.c-post__visual-wrapper.--screen:nth-child(2n+2 of .c-post__visual-wrapper.--screen) .c-post__visual {
  background: color-mix(in srgb, var(--color-project) 33.3333%, var(--color-bg) 66.6666%);
}
.c-post__visual-wrapper.--screen:nth-child(2n+3 of .c-post__visual-wrapper.--screen) .c-post__visual {
  background: var(--color-image-bg);
}
.c-post__visual-wrapper.--full:nth-child(4n+1 of .c-post__visual-wrapper.--full) .c-post__visual, .c-post__visual-wrapper.--full:nth-child(4n+2 of .c-post__visual-wrapper.--full) .c-post__visual {
  background: var(--color-image-bg);
}
.c-post__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-project) 50%, var(--color-image-bg) 50%);
}
.--screen .c-post__visual {
  aspect-ratio: 16/9;
  padding: 2rem;
}
@media (min-width: 1200px) {
  .--screen .c-post__visual {
    padding: 6rem 12rem;
  }
}
.--full .c-post__visual {
  aspect-ratio: 2/3;
  padding: 2rem 4rem;
}
@media (min-width: 1200px) {
  .--full .c-post__visual {
    aspect-ratio: 3/4;
  }
}
.--print .c-post__visual {
  background: var(--color-image-bg);
}
.c-post__visual-picture {
  overflow: hidden;
  display: flex;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.--screen .c-post__visual-picture {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}
.--full .c-post__visual-picture {
  width: auto;
  height: 100%;
  border-radius: 0.125rem;
}
.c-post__visual-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  max-height: 1200px;
}
.c-post__visual-description {
  margin-top: 0.25rem;
  color: color-mix(in srgb, var(--color-text) 66.6666%, var(--color-bg) 33.3333%);
  font-size: 0.9375rem;
  line-height: 24px;
}
.c-post__mockups {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  justify-content: center;
  background: var(--color-image-bg);
  padding: 2rem;
}
@media (min-width: 768px) {
  .c-post__mockups {
    padding: 4rem;
  }
}
@media (min-width: 1200px) {
  .c-post__mockups {
    aspect-ratio: 16/9;
    align-items: center;
  }
}
.c-post__mockup {
  overflow: hidden;
  display: flex;
  position: relative;
}
@media (min-width: 1200px) {
  .c-post__mockup {
    position: absolute;
  }
}
.c-post__mockup.--mobile {
  max-width: 27.5%;
  z-index: 2;
  border-radius: 0.5rem;
  border: 0.125rem solid black;
  background: color-mix(in srgb, black 75%, white 25%);
  box-shadow: 0px 0px 1px 1px #666, 2px 2px 4px 0px rgba(0, 0, 0, 0.1);
  padding-top: 0.875rem;
}
.c-post__mockup.--mobile::before {
  content: "";
  display: block;
  width: 30%;
  height: 0.25rem;
  left: 35%;
  top: 0.125rem;
  background: black;
  position: absolute;
  border-radius: 0.5rem;
}
.c-post__mockup.--mobile::after {
  content: "";
  display: block;
  width: 50%;
  height: 1px;
  left: 25%;
  bottom: 0.125rem;
  background: black;
  position: absolute;
  border-radius: 0.5rem;
  opacity: 0.25;
}
@media (min-width: 768px) {
  .c-post__mockup.--mobile {
    border-radius: 1rem;
    border: 0.25rem solid black;
    padding-top: 1.5rem;
  }
  .c-post__mockup.--mobile::before {
    height: 0.5rem;
    top: 0.25rem;
  }
  .c-post__mockup.--mobile::after {
    height: 0.125rem;
    bottom: 0.25rem;
  }
}
@media (min-width: 1200px) {
  .c-post__mockup.--mobile {
    max-width: 10%;
    left: calc(25% + 6rem + 2rem);
    bottom: 6rem;
  }
}
.c-post__mockup.--tablet {
  max-width: 72.5%;
  z-index: 1;
  border-radius: 0.75rem;
  border: 0.625rem solid black;
  box-shadow: 0px 0px 1px 1px #666, 2px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.c-post__mockup.--tablet::after {
  content: "";
  display: block;
  width: 50%;
  height: 0.125rem;
  left: 25%;
  bottom: 0.25rem;
  background: black;
  position: absolute;
  border-radius: 0.5rem;
  opacity: 0.25;
}
@media (min-width: 768px) {
  .c-post__mockup.--tablet {
    border-radius: 1rem;
    border: 0.75rem solid black;
  }
}
@media (min-width: 1200px) {
  .c-post__mockup.--tablet {
    max-width: 25%;
    left: 6rem;
    bottom: 6rem;
  }
}
.c-post__mockup.--desktop {
  display: none;
}
@media (min-width: 1200px) {
  .c-post__mockup.--desktop {
    display: block;
    aspect-ratio: 16/9;
    overflow: visible;
    background: #ddd;
    border-radius: 0.25rem 0.25rem 0 0;
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1);
    max-width: 65%;
    left: auto;
    right: 6rem;
    top: 6rem;
    padding-top: 1.25rem;
  }
  .c-post__mockup.--desktop::after {
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute;
    background-color: red;
    width: 0.5rem;
    height: 0.5rem;
    top: 0.375rem;
    left: 0.5rem;
  }
}
.--desktop .c-post__mockup-picture::before, .--desktop .c-post__mockup-picture::after {
  content: "";
  display: block;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  position: absolute;
  top: 0.25rem;
}
.--desktop .c-post__mockup-picture::before {
  background-color: yellow;
  left: 0.675rem;
}
.--desktop .c-post__mockup-picture::after {
  background-color: LimeGreen;
  left: 1.125rem;
}
@media (min-width: 1200px) {
  .--desktop .c-post__mockup-picture::before, .--desktop .c-post__mockup-picture::after {
    width: 0.5rem;
    height: 0.5rem;
    top: 0.375rem;
  }
  .--desktop .c-post__mockup-picture::before {
    left: 1.25rem;
  }
  .--desktop .c-post__mockup-picture::after {
    left: 2rem;
  }
}
.c-post__mockup-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  max-height: 1200px;
}
.c-post__case-studies {
  display: flex;
  gap: 2rem;
}
@media (min-width: 1200px) {
  .c-post__case-studies {
    gap: 4rem;
  }
}
.c-post__case-studies-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .c-post__case-studies-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}
@media (min-width: 1200px) {
  .c-post__case-studies-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.c-post__case-study-picture {
  aspect-ratio: 1/1;
}
.c-post__case-study-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top left;
     object-position: top left;
}
.c-post__case-study-description {
  margin-top: 0.25rem;
  color: color-mix(in srgb, var(--color-text) 66.6666%, var(--color-bg) 33.3333%);
  font-size: 0.9375rem;
  line-height: 24px;
}

.c-post-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.c-post-card__image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  background: color-mix(in srgb, var(--color-project) 50%, var(--color-image-bg) 50%);
  overflow: hidden;
}
.c-post-card__image-wrapper.--screen {
  padding: 2rem;
}
@media (min-width: 1200px) {
  .c-post-card__image-wrapper.--screen {
    padding: 4rem;
  }
}
.c-post-card__image-wrapper.--placeholder {
  overflow: visible;
}
.--screen .c-post-card__picture {
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  overflow: hidden;
}
.--full .c-post-card__picture {
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  overflow: hidden;
}
.c-post-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
}
.c-post-card__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.c-post-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-post-card__link {
  font-family: "Public Sans", "Open Sans", sans-serif;
  font-weight: 600;
}
.c-post-card.--inactive {
  display: none;
}
.c-post-card.--special .c-post-card__image-wrapper {
  background-color: var(--color-image-bg);
  padding: 0;
}

.c-categories {
  display: flex;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 24px;
}
.c-categories__category {
  background: var(--color-image-bg);
  padding: 0.25rem 0.5rem;
}

.c-login__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1200px) {
  .c-login__content {
    gap: 2rem;
  }
}
.c-search {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
@media (min-width: 768px) {
  .c-search {
    gap: 6rem;
  }
}
.c-search__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 1200px) {
  .c-search__content {
    gap: 2rem;
  }
}
.c-search__results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1200px) {
  .c-search__results {
    gap: 2rem;
  }
}

.c-search-card {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
/* Text meant only for screen readers. */
.u-screen-reader-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}
.u-screen-reader-only:focus, .u-screen-reader-only:focus-visible {
  clip: auto !important;
  clip-path: none;
  width: auto;
  height: auto;
  margin: 0;
  display: inline-block;
  z-index: 100000; /* Above WP toolbar. */
}

.u-position-absolute {
  position: absolute;
}

.u-position-relative {
  position: relative;
}

.u-overflow-hidden {
  overflow: hidden;
}

body.admin-bar .c-header {
  top: 46px;
}
@media (min-width: 783px) {
  body.admin-bar .c-header {
    top: 32px;
  }
}/*# sourceMappingURL=style.css.map */