@layer pattern {
  .miz-link-list-layer {
    --link-list-layer-background-color: transparent;
    --link-list-layer-content-font-family: Open Sans, Segoe UI, tahoma, sans-serif;
    --link-list-layer-title-font-family: Manuka, fallback for Manuka, Arial, sans-serif;
    --link-list-layer-title-text-align: center;
    container: link-list-layer/inline-size;
    position: relative;
    overflow-y: hidden;
    background-color: var(--link-list-layer-background-color);
  }
  @supports (display: grid) {
    .miz-link-list-layer {
      display: grid;
      grid-auto-flow: row;
      place-items: normal normal;
      grid-template-columns: [full-start main-start] repeat(12, [col] 1fr) [main-end full-end];
      column-gap: 16px;
      grid-template-rows: [full-start main-start] repeat(1, [row] auto) [main-end full-end];
      row-gap: 16px;
      grid-template-columns: [full-start] 0 [main-start] repeat(12, [col] 1fr) [main-end] 0 [full-end];
      column-gap: 16px;
      grid-template-rows: [full-start] 16px [main-start] repeat(1, [row] auto) [main-end] 16px [full-end];
      row-gap: 16px;
    }
    .miz-link-list-layer > * {
      grid-column: main-start/span 12;
    }
    @media (min-width: 576px) {
      .miz-link-list-layer {
        grid-template-columns: [full-start] minmax(0px, 0px) [main-start] repeat(12, [col] minmax(30.6666666667px, 46.6666666667px)) [main-end] minmax(0px, 0px) [full-end];
        column-gap: 16px;
        grid-template-rows: [full-start] 16px [main-start] repeat(1, [row] auto) [main-end] 16px [full-end];
        row-gap: 16px;
      }
    }
    .miz-link-list-layer > * {
      grid-column: main-start/span 12;
    }
    @media (min-width: 768px) {
      .miz-link-list-layer {
        grid-template-columns: [full-start] minmax(0px, 16px) [main-start] repeat(12, [col] minmax(46.6666666667px, 65.3333333333px)) [main-end] minmax(0px, 16px) [full-end];
        column-gap: 16px;
        grid-template-rows: [full-start] 16px [main-start] repeat(1, [row] auto) [main-end] 16px [full-end];
        row-gap: 16px;
      }
    }
    .miz-link-list-layer > * {
      grid-column: main-start/span 12;
    }
    @media (min-width: 1024px) {
      .miz-link-list-layer {
        grid-template-columns: [full-start] minmax(16px, 48px) [main-start] repeat(12, [col] minmax(65.3333333333px, 81.3333333333px)) [main-end] minmax(16px, 48px) [full-end];
        column-gap: 16px;
        grid-template-rows: [full-start] 16px [main-start] repeat(1, [row] auto) [main-end] 16px [full-end];
        row-gap: 16px;
      }
    }
    .miz-link-list-layer > * {
      grid-column: main-start/span 12;
    }
    @media (min-width: 1280px) {
      .miz-link-list-layer {
        grid-template-columns: [full-start] minmax(32px, 64px) [main-start] repeat(12, [col] minmax(66.6666666667px, 74.6666666667px)) [main-end] minmax(32px, 64px) [full-end];
        column-gap: 32px;
        grid-template-rows: [full-start] 16px [main-start] repeat(1, [row] auto) [main-end] 16px [full-end];
        row-gap: 16px;
      }
    }
    .miz-link-list-layer > * {
      grid-column: main-start/span 12;
    }
    @media (min-width: 1440px) {
      .miz-link-list-layer {
        grid-template-columns: [full-start] minmax(64px, 128px) [main-start] repeat(12, [col] minmax(74.6666666667px, 104px)) [main-end] minmax(64px, 128px) [full-end];
        column-gap: 32px;
        grid-template-rows: [full-start] 16px [main-start] repeat(1, [row] auto) [main-end] 16px [full-end];
        row-gap: 16px;
      }
    }
    .miz-link-list-layer > * {
      grid-column: main-start/span 12;
    }
  }
}
@layer component {
  .miz-link-list-layer__content {
    position: relative;
    z-index: 10;
    grid-row: main;
    color: var(--link-list-layer-content-text-color);
    background-color: var(--link-list-layer-content-background-color);
    font-family: var(--link-list-layer-content-font-family);
    font-size: var(--link-list-layer-content-font-size);
    font-weight: var(--link-list-layer-content-font-weight);
  }
  .miz-link-list-layer__content ::selection {
    background-color: var(--link-list-layer-content-background-color-selection);
    color: var(--link-list-layer-content-text-color-selection);
  }
  .miz-link-list-layer__content > * + * {
    margin-top: 1.5rem;
  }
  @media (min-width: 576px) {
    .miz-link-list-layer__content {
      grid-column: 2 col/span 10;
    }
  }
  @media (min-width: 768px) {
    .miz-link-list-layer__content {
      grid-column: 3 col/span 8;
    }
  }
}
@layer component {
  .miz-link-list-layer__title {
    position: relative;
    z-index: 10;
    color: var(--link-list-layer-title-text-color);
    background-color: var(--link-list-layer-title-background-color);
    font-family: var(--link-list-layer-title-font-family);
    font-size: var(--link-list-layer-title-font-size);
    font-weight: var(--link-list-layer-title-font-weight);
    text-align: var(--link-list-layer-title-text-align);
    line-height: 0.9;
  }
  .miz-link-list-layer__title::before, .miz-link-list-layer__title::after {
    content: "";
    display: block;
    height: 0;
    width: 0;
  }
  .miz-link-list-layer__title::before {
    margin-bottom: calc(-0.0872174156em + 0px);
  }
  .miz-link-list-layer__title::after {
    margin-top: calc(-0.0697739325em + 0px);
  }
  @container link-list-layer (min-width: 0) {
    .miz-link-list-layer__title {
      --link-list-layer-title-font-size: clamp(2.488rem, 5.16cqi, 3.583rem);
    }
  }
}
@layer component {
  .miz-link-list-layer__link-list {
    --link-list-link-text-decoration: none;
    gap: 2rem;
  }
  @media (min-width: 768px) {
    .miz-link-list-layer__link-list {
      flex-flow: row wrap;
    }
  }
  .miz-link-list__link.miz-link {
    --link-list-link-spacing: 1rem 1rem 1rem 1rem;
    --effect-background-image: linear-gradient(0deg, var(--link-list-link-effect-background-color) 0%, var(--link-list-link-effect-background-color) 100%);
    display: inline-block;
    margin: inherit inherit inherit inherit;
    padding: inherit inherit inherit inherit;
    text-decoration: none;
    z-index: 1;
    background-image: var(--effect-background-image);
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;
    color: var(--link-list-link-color);
    font-weight: 600;
    transition: background-size 0.1s ease-in-out, color 0.1s;
  }
  .miz-link-list__link.miz-link:hover {
    background-size: 100% 100%;
    color: var(--link-list-link-color);
  }
  .miz-link-list__link.miz-link:active {
    background-size: 100% 100%;
    background-image: linear-gradient(0deg, rgb(255, 209, 125) 0%, rgb(255, 209, 125) 100%);
  }
}
@layer modifier {
  .miz-link-list-layer--light {
    --link-list-layer-background-color: rgb(255, 255, 255);
    --link-list-layer-content-text-color: rgb(0, 0, 0);
    --link-list-layer-content-background-color: rgb(255, 255, 255);
  }
  .miz-link-list-layer--light .miz-link-list-layer__link-list {
    --link-list-link-color: rgb(0, 0, 0);
    --link-list-link-color-hover: rgb(0, 0, 0);
  }
  .miz-link-list-layer--light .miz-link-list-layer__link-list .miz-link-list__link {
    --link-list-link-effect-background-color: rgb(253, 184, 25);
  }
  .miz-link-list-layer--dark {
    --link-list-layer-background-color: rgb(31, 31, 31);
    --link-list-layer-content-text-color: rgb(255, 255, 255);
    --link-list-layer-content-background-color: rgb(31, 31, 31);
    --link-list-layer-title-text-color: rgb(253, 184, 25);
  }
  .miz-link-list-layer--dark .miz-link-list-layer__link-list {
    --link-list-link-color: rgb(255, 255, 255);
    --link-list-link-color-hover: rgb(0, 0, 0);
  }
  .miz-link-list-layer--dark .miz-link-list-layer__link-list .miz-link-list__link {
    --link-list-link-effect-background-color: rgb(253, 184, 25);
  }
  .miz-link-list-layer--gold {
    --link-list-layer-background-color: rgb(253, 184, 25);
    --link-list-layer-content-text-color: rgb(0, 0, 0);
    --link-list-layer-content-background-color: rgb(253, 184, 25);
  }
  .miz-link-list-layer--gold .miz-link-list-layer__link-list {
    --link-list-link-color: rgb(0, 0, 0);
    --link-list-link-color-hover: rgb(255, 255, 255);
  }
  .miz-link-list-layer--gold .miz-link-list-layer__link-list .miz-link-list__link {
    --link-list-link-effect-background-color: rgb(0, 0, 0);
  }
}