@layer component {
  .miz-page-header {
    --page-header-background-color: transparent;
    --page-header-text-color: rgb(0, 0, 0);
    --page-header-text-color-selection: rgb(0, 0, 0);
    --page-header-text-background-color-selection: rgb(255, 209, 125);
    --page-header-space-padding: 3rem 0;
    --page-header-title-font-family: Manuka;
    --page-header-title-font-size: 6.192rem;
    --page-header-title-font-stretch: 75%;
    --page-header-title-font-weight: 600;
    --page-header-title-text-color: rgb(0, 0, 0);
    --page-header-section-font-family: Open Sans, Segoe UI, tahoma, sans-serif;
    --page-header-section-font-size: 1.2rem;
    --page-header-section-font-weight: 500;
    --page-header-section-text-transform: uppercase;
    --component-mode-link-color: var(--page-header-text-color);
    --component-mode-text-color: var(--page-header-text-color);
    background-color: var(--page-header-background-color);
    color: var(--page-header-text-color);
    --grid-row-gap: 0;
    --grid-col-gap: 1rem;
    --grid-gap: var(--grid-row-gap) var(--grid-col-gap);
    container: layout/inline-size;
    display: grid;
    position: relative;
    isolation: isolate;
    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
    grid-template-columns: [full-start main-start] minmax(300px, 100%) [main-end full-end];
    grid-template-rows: [top-start] minmax(-webkit-min-content, 0) [top-end main-start] minmax(-webkit-min-content, 0) minmax(-webkit-min-content, auto) minmax(-webkit-min-content, 0) [main-end bottom-start] minmax(-webkit-min-content, 0) [bottom-end];
    grid-template-rows: [top-start] minmax(min-content, 0) [top-end main-start] minmax(min-content, 0) minmax(min-content, auto) minmax(min-content, 0) [main-end bottom-start] minmax(min-content, 0) [bottom-end];
    grid-template-areas: "top" "header" "body" "footer" "bottom";
    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
    justify-content: center;
    justify-items: stretch;
    gap: var(--grid-gap);
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    grid-template-areas: ". top ." ". header ." ". body ." ". footer ." ". bottom .";
    grid-template-columns: [full-start] calc(16px - var(--grid-col-gap)) [main-start] minmax(300px, 1600px) [main-end] calc(16px - var(--grid-col-gap)) [full-end];
  }
  @media (min-width: 1280px) {
    .miz-page-header {
      --grid-col-gap: 2rem;
    }
  }
  @media (min-width: 576px) {
    .miz-page-header {
      grid-template-columns: [full-start] calc(16px - var(--grid-col-gap)) [main-start] minmax(300px, 1600px) [main-end] calc(16px - var(--grid-col-gap)) [full-end];
    }
  }
  @media (min-width: 768px) {
    .miz-page-header {
      grid-template-columns: [full-start] calc(32px - var(--grid-col-gap)) [main-start] minmax(300px, 1600px) [main-end] calc(32px - var(--grid-col-gap)) [full-end];
    }
  }
  @media (min-width: 1024px) {
    .miz-page-header {
      grid-template-columns: [full-start] calc(64px - var(--grid-col-gap)) [main-start] minmax(300px, 1600px) [main-end] calc(64px - var(--grid-col-gap)) [full-end];
    }
  }
  @media (min-width: 1280px) {
    .miz-page-header {
      grid-template-columns: [full-start] calc(96px - var(--grid-col-gap)) [main-start] minmax(300px, 1600px) [main-end] calc(96px - var(--grid-col-gap)) [full-end];
    }
  }
  @media (min-width: 1440px) {
    .miz-page-header {
      grid-template-columns: [full-start] calc(160px - var(--grid-col-gap)) [main-start] minmax(300px, 1600px) [main-end] calc(160px - var(--grid-col-gap)) [full-end];
    }
  }
  @media (min-width: 1600px) {
    .miz-page-header {
      grid-template-columns: [full-start] calc(160px - var(--grid-col-gap)) [main-start] minmax(300px, 1600px) [main-end] calc(160px - var(--grid-col-gap)) [full-end];
    }
  }
  .miz-page-header ::-moz-selection {
    color: var(--page-header-text-color-selection);
    background-color: var(--page-header-text-background-color-selection);
  }
  .miz-page-header ::selection {
    color: var(--page-header-text-color-selection);
    background-color: var(--page-header-text-background-color-selection);
  }
}
@layer component {
  .miz-page-header__content {
    grid-area: body;
    padding: var(--page-header-space-padding);
  }
  .miz-page-header__content > * + * {
    margin-top: 1rem;
  }
  @media (min-width: 768px) {
    .miz-page-header__content {
      --page-header-space-padding: 4rem 0;
    }
  }
}
@layer component {
  .miz-page-header__title {
    font-family: var(--page-header-title-font-family);
    font-size: var(--page-header-title-font-size);
    font-weight: var(--page-header-title-font-weight);
    font-stretch: var(--page-header-title-font-stretch);
    color: var(--page-header-title-text-color);
    line-height: 0.9;
  }
  .miz-page-header__title::before, .miz-page-header__title::after {
    content: "";
    display: block;
    height: 0;
    width: 0;
  }
  .miz-page-header__title::before {
    margin-bottom: calc(-0.0872174156em + 0px);
  }
  .miz-page-header__title::after {
    margin-top: calc(-0.0697739325em + 0px);
  }
}
@layer component {
  .miz-page-header__section-name {
    font-family: var(--page-header-section-font-family);
    font-size: var(--page-header-section-font-size);
    font-weight: var(--page-header-section-font-weight);
    text-transform: var(--page-header-section-text-transform);
    line-height: 1.3;
  }
  .miz-page-header__section-name::before, .miz-page-header__section-name::after {
    content: "";
    display: block;
    height: 0;
    width: 0;
  }
  .miz-page-header__section-name::before {
    margin-bottom: calc(-0.30625em + 0px);
  }
  .miz-page-header__section-name::after {
    margin-top: calc(-0.275em + 0px);
  }
}
@layer component {
  .miz-page-header__breadcrumbs {
    left: -0.625rem;
  }
}
@layer component {
  .miz-page-header__intro {
    background-color: rgb(0, 0, 0);
    font-family: "Martina Plantijn";
    font-size: medium;
    color: var(--component-mode-text-color);
  }
  @media (min-width: 1024px) {
    .miz-page-header__intro {
      grid-column-end: 8;
      font-size: 1.44rem;
      max-width: 75%;
    }
  }
}
@layer component {
  .miz-page-header__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -100;
    margin: 0;
  }
  .miz-page-header__background > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -100;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .miz-page-header__background {
      grid-column: full;
      aspect-ratio: 16/9;
    }
  }
}
@layer modifier {
  .miz-page-header--light {
    --page-header-background-color: rgb(255, 255, 255);
    --page-header-text-color: rgb(0, 0, 0);
    --page-header-text-color-selection: rgb(0, 0, 0);
    --page-header-text-background-color-selection: rgb(255, 209, 125);
    --page-header-link-color: rgb(0, 0, 0);
    --page-header-link-color-hover: rgb(0, 0, 0);
  }
  .miz-page-header--dark {
    --page-header-background-color: rgb(0, 0, 0);
    --page-header-text-color: rgb(255, 255, 255);
    --page-header-text-color-selection: rgb(0, 0, 0);
    --page-header-text-background-color-selection: rgb(255, 209, 125);
    --page-header-title-text-color: rgb(253, 184, 25);
    --page-header-link-color: rgb(255, 255, 255);
    --page-header-link-color-hover: rgb(255, 255, 255);
  }
}
@layer modifier {
  .miz-page-header--compact {
    --page-header-space-padding: 2rem 0;
    --page-header-title-font-size: 4.3rem;
  }
}
@layer modifier {
  .miz-page-header--landing-page {
    --component-mode-text-color: white;
    --component-mode-link-color: white;
    --page-header-space-padding: 0;
    aspect-ratio: 16/9;
    max-height: 80dvh;
    width: 100%;
    align-items: end;
  }
  .miz-page-header--landing-page .miz-page-header__content {
    position: relative;
    display: grid;
    grid-column: full;
    grid-row: body;
    grid-template-columns: subgrid;
    align-items: end;
    padding: 0 1.5rem 1rem;
    background-color: rgb(0, 0, 0);
  }
  .miz-page-header--landing-page .miz-page-header__content > * {
    grid-column: main;
  }
  .miz-page-header--landing-page .miz-page-header__title {
    padding: 2rem 0 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    color: rgb(253, 184, 25);
    background-color: rgb(0, 0, 0);
  }
  @media (min-width: 768px) {
    .miz-page-header--landing-page .miz-page-header__title {
      position: absolute;
      padding: 2rem 2rem 0;
      bottom: 100%;
    }
  }
  @media (min-width: 768px) {
    .miz-page-header--landing-page .miz-page-header__breadcrumbs {
      position: relative;
      margin-left: 2rem;
    }
    .miz-page-header--landing-page .miz-page-header__intro {
      position: relative;
      margin-left: 2rem;
    }
  }
}