@layer component {
  .miz-card {
    --card-body-background-color: transparent;
    --card-border-color: transparent;
    --card-border-width: 0;
    --card-border-radius: 0;
    --card-border-style: solid;
    --card-font-family: Open Sans, Segoe UI, tahoma, sans-serif;
    --card-font-size: medium;
    --card-text-color: rgb(0, 0, 0);
    --card-text-title-color: rgb(0, 0, 0);
    --card-title-font-family: Open Sans, Segoe UI, tahoma, sans-serif;
    --card-title-font-size: 2.074rem;
    --card-title-font-weight: 700;
    --card-title-font-stretch: 75%;
    --card-subtitle-text-color: rgb(0, 0, 0);
    --card-subtitle-font-family: Open Sans, Segoe UI, tahoma, sans-serif;
    --card-subtitle-font-size: 1.2rem;
    --card-subtitle-font-weight: 600;
    --card-subtitle-margin-top: 0.5rem;
    --card-max-width: none;
    --card-body-padding: 1.5rem 1.5rem 1.5rem 1.5rem;
    --card-body-stack: 1rem 0 0 0;
    --card-header-space: 0.5rem 1.5rem 0.5rem 1.5rem;
    --card-header-background-color: rgb(255, 237, 207);
    --card-header-border-size: 1px;
    --card-header-border-style: solid;
    --card-header-border-color: rgb(255, 209, 125);
    --card-header-font-weight: 600;
    --card-header-text-color: rgb(0, 0, 0);
    position: relative;
    display: flex;
    flex-direction: column;
    container: card/inline-size;
    max-width: var(--card-max-width);
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: var(--card-border-width);
    border-style: var(--card-border-style);
    border-color: var(--card-border-color);
    border-radius: var(--card-border-radius);
    font-family: var(--card-font-family);
    font-size: var(--card-font-size);
    color: var(--card-text-color);
  }
  .miz-card ::selection {
    background-color: rgb(255, 209, 125);
  }
  .miz-card__body {
    flex: 1 1 auto;
    padding: var(--card-body-padding);
    background-color: var(--card-body-background-color);
    font-size: var(--card-font-size);
  }
  .miz-card__body * {
    margin-bottom: 0;
  }
  .miz-card__body > * + * {
    margin: var(--card-body-stack);
  }
  .miz-card__title {
    font-family: var(--card-title-font-family);
    font-size: var(--card-title-font-size);
    font-weight: var(--card-title-font-weight);
    font-stretch: var(--card-title-font-stretch);
    color: var(--card-title-text-color);
  }
  .miz-card__title:not(:last-child) {
    margin-bottom: 0.75rem;
  }
  .miz-card__title-link {
    --effect-background-image: linear-gradient(0deg, rgb(253, 184, 25) 0%, rgb(253, 184, 25) 100%);
    display: inline-block;
    margin: 0 -1px -0.25rem -1px;
    padding: 0.125rem 0.125rem 0.125rem 0.125rem;
    text-decoration: none;
    z-index: 1;
    background-image: var(--effect-background-image);
    background-repeat: no-repeat;
    background-size: 100% 4px;
    background-position: 0 100%;
    color: currentcolor;
    font-weight: 600;
    transition: background-size 0.1s ease-in-out, color 0.1s;
  }
  .miz-card__title-link:hover {
    background-size: 100% 100%;
    color: rgb(0, 0, 0);
  }
  .miz-card__title-link:active {
    background-size: 100% 100%;
    background-image: linear-gradient(0deg, rgb(255, 209, 125) 0%, rgb(255, 209, 125) 100%);
  }
  .miz-card__title-link.miz-card__title-link-underline {
    --card-link-underline-thickness: 4px;
    --effect-background-image: linear-gradient(0deg, rgb(253, 184, 25) 0%, rgb(253, 184, 25) 100%);
    display: inline-block;
    margin: 0 -1px -0.25rem -1px;
    padding: 0.125rem 0.125rem 0.125rem 0.125rem;
    text-decoration: none;
    z-index: 1;
    background-image: var(--effect-background-image);
    background-repeat: no-repeat;
    background-size: 100% 4px;
    background-position: 0 100%;
    color: currentcolor;
    font-weight: 600;
    transition: background-size 0.1s ease-in-out, color 0.1s;
    background-size: 0 var(--card-link-underline-thickness);
  }
  .miz-card__title-link.miz-card__title-link-underline:hover {
    background-size: 100% 100%;
    color: rgb(0, 0, 0);
  }
  .miz-card__title-link.miz-card__title-link-underline:active {
    background-size: 100% 100%;
    background-image: linear-gradient(0deg, rgb(255, 209, 125) 0%, rgb(255, 209, 125) 100%);
  }
  .miz-card__title-link.miz-card__title-link-underline:hover, .miz-card__title-link.miz-card__title-link-underline:active {
    background-size: 100% var(--card-link-underline-thickness);
  }
  .miz-card__subtitle {
    margin-top: var(--card-subtitle-margin-top);
    font-family: var(--card-subtitle-font-family);
    font-size: var(--card-subtitle-font-size);
    font-weight: var(--card-subtitle-font-weight);
    color: var(--card-subtitle-text-color);
  }
  .miz-card__image {
    --card-image-aspect-ratio: 2.39 / 1;
    --card-image-object-fit: cover;
    --card-image-object-position: top;
    --card-image-width: 100%;
    --card-image-height: auto;
    aspect-ratio: var(--card-image-aspect-ratio);
    object-fit: var(--card-image-object-fit);
    object-position: var(--card-image-object-position);
    width: var(--card-image-width);
    height: var(--card-image-height);
  }
  .miz-card__image.miz-card__image--16-9 {
    --card-image-aspect-ratio: 16 / 9;
  }
  .miz-card__image.miz-card__image--4-3 {
    --card-image-aspect-ratio: 4 / 3;
  }
  .miz-card__image.miz-card__image--1-1 {
    --card-image-aspect-ratio: 1 / 1;
  }
  .miz-card__image.miz-card__image--focal-top {
    --card-image-object-position: top;
  }
  .miz-card__image.miz-card__image--focal-center {
    --card-image-object-position: center;
  }
  .miz-card__image.miz-card__image--focal-bottom {
    --card-image-object-position: bottom;
  }
  .miz-card__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  @media (min-width: 768px) {
    .miz-card__links {
      flex-flow: row wrap;
    }
  }
  .miz-card__link {
    --effect-background-image: linear-gradient(0deg, rgb(253, 184, 25) 0%, rgb(253, 184, 25) 100%);
    display: inline-block;
    margin: 0 -1px 0.05rem -1px;
    padding: 0.125rem 0.125rem 0.125rem 0.125rem;
    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: currentcolor;
    font-weight: 600;
    transition: background-size 0.1s ease-in-out, color 0.1s;
  }
  .miz-card__link:hover {
    background-size: 100% 100%;
    color: rgb(0, 0, 0);
  }
  .miz-card__link:active {
    background-size: 100% 100%;
    background-image: linear-gradient(0deg, rgb(255, 209, 125) 0%, rgb(255, 209, 125) 100%);
  }
  .miz-card__links--stack {
    flex-direction: column;
  }
  .miz-card__header {
    padding: var(--card-header-space);
    margin-bottom: 0;
    background-color: var(--card-header-background-color);
    border-bottom: var(--card-header-border-size) var(--card-header-border-style) var(--card-header-border-color);
    font-size: 0.833rem;
    font-weight: var(--card-header-font-weight);
    color: var(--card-header-text-color);
  }
  .miz-card__header > :last-child {
    margin-bottom: 0;
  }
  @container card (width < 375px) {
    .miz-card__header {
      --card-header-space: 0.5rem 1rem;
    }
    .miz-card__body {
      --card-body-space: 1rem;
    }
  }
}
@layer modifier {
  .miz-card--light {
    --card-body-background-color: rgb(255, 255, 255);
  }
  .miz-card--dark {
    --card-text-color: rgb(255, 255, 255);
    --card-title-text-color: rgb(253, 184, 25);
    --card-subtitle-text-color: rgb(255, 255, 255);
    --card-header-text-color: rgb(255, 255, 255);
    --card-header-background-color: rgb(51, 51, 51);
    --card-header-border-color: rgb(51, 51, 51);
    --card-body-background-color: rgb(31, 31, 31);
  }
  .miz-card--dark .miz-card__title-link {
    --effect-background-image: linear-gradient(0deg, rgb(253, 184, 25) 0%, rgb(253, 184, 25) 100%);
    display: inline-block;
    margin: 0 -1px -0.25rem -1px;
    padding: 0.125rem 0.125rem 0.125rem 0.125rem;
    text-decoration: none;
    z-index: 1;
    background-image: var(--effect-background-image);
    background-repeat: no-repeat;
    background-size: 100% 4px;
    background-position: 0 100%;
    color: currentcolor;
    font-weight: 600;
    transition: background-size 0.1s ease-in-out, color 0.1s;
  }
  .miz-card--dark .miz-card__title-link:hover {
    background-size: 100% 100%;
    color: rgb(0, 0, 0);
  }
  .miz-card--dark .miz-card__title-link:active {
    background-size: 100% 100%;
    background-image: linear-gradient(0deg, rgb(255, 209, 125) 0%, rgb(255, 209, 125) 100%);
  }
  .miz-card--dark .miz-card__title-link.miz-card__title-link-underline {
    --card-link-underline-thickness: 4px;
    --effect-background-image: linear-gradient(0deg, rgb(253, 184, 25) 0%, rgb(253, 184, 25) 100%);
    display: inline-block;
    margin: 0 -1px -0.25rem -1px;
    padding: 0.125rem 0.125rem 0.125rem 0.125rem;
    text-decoration: none;
    z-index: 1;
    background-image: var(--effect-background-image);
    background-repeat: no-repeat;
    background-size: 100% 4px;
    background-position: 0 100%;
    color: currentcolor;
    font-weight: 600;
    transition: background-size 0.1s ease-in-out, color 0.1s;
    background-size: 0 var(--card-link-underline-thickness);
  }
  .miz-card--dark .miz-card__title-link.miz-card__title-link-underline:hover {
    background-size: 100% 100%;
    color: var(--card-title-text-color);
  }
  .miz-card--dark .miz-card__title-link.miz-card__title-link-underline:active {
    background-size: 100% 100%;
    background-image: linear-gradient(0deg, rgb(255, 209, 125) 0%, rgb(255, 209, 125) 100%);
  }
  .miz-card--dark .miz-card__title-link.miz-card__title-link-underline:hover, .miz-card--dark .miz-card__title-link.miz-card__title-link-underline:active {
    background-size: 100% var(--card-link-underline-thickness);
  }
  .miz-card--dark ::selection {
    background-color: rgb(51, 51, 51);
  }
  .miz-card--darker {
    --card-text-color: rgb(255, 255, 255);
    --card-title-text-color: rgb(253, 184, 25);
    --card-subtitle-text-color: rgb(255, 255, 255);
    --card-header-text-color: rgb(255, 255, 255);
    --card-header-background-color: rgb(51, 51, 51);
    --card-header-border-color: rgb(51, 51, 51);
    --card-body-background-color: rgb(0, 0, 0);
  }
  .miz-card--darker .miz-card__title-link {
    --effect-background-image: linear-gradient(0deg, rgb(253, 184, 25) 0%, rgb(253, 184, 25) 100%);
    display: inline-block;
    margin: 0 -1px -0.25rem -1px;
    padding: 0.125rem 0.125rem 0.125rem 0.125rem;
    text-decoration: none;
    z-index: 1;
    background-image: var(--effect-background-image);
    background-repeat: no-repeat;
    background-size: 100% 4px;
    background-position: 0 100%;
    color: currentcolor;
    font-weight: 600;
    transition: background-size 0.1s ease-in-out, color 0.1s;
  }
  .miz-card--darker .miz-card__title-link:hover {
    background-size: 100% 100%;
    color: rgb(0, 0, 0);
  }
  .miz-card--darker .miz-card__title-link:active {
    background-size: 100% 100%;
    background-image: linear-gradient(0deg, rgb(255, 209, 125) 0%, rgb(255, 209, 125) 100%);
  }
  .miz-card--darker ::selection {
    background-color: rgb(51, 51, 51);
  }
  .miz-card--outline {
    --card-border-color: rgb(212, 212, 212);
    --card-border-width: 1px;
    --card-border-style: solid;
  }
  .miz-card--outline.miz-card--dark {
    --card-border-color: rgb(70, 70, 70);
  }
  @media (min-width: 768px) {
    .miz-card--inline {
      flex-direction: row;
    }
    .miz-card--inline .miz-card__picture, .miz-card--inline .miz-card__image {
      flex: 1 1 50%;
      max-width: 384px;
    }
    .miz-card--inline .miz-card__body {
      flex: 1 1 50%;
      min-width: 384px;
    }
  }
  .miz-card__body--flush {
    padding-right: 0;
    padding-left: 0;
  }
  .miz-card__body--center .miz-card__title, .miz-card__body--center .miz-card__subtitle {
    text-align: center;
  }
  .miz-card__body--center * {
    margin-left: auto;
    margin-right: auto;
  }
}
.miz-card-group {
  position: relative;
  /* Prevent columns from becoming too narrow when at smaller grid tiers by
     always setting `width: 100%;`. This works because we use `flex` values
     later on to override this initial width. */
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  display: flex;
  flex-flow: column wrap;
  align-items: stretch;
}
.miz-card-group > * {
  flex: 1 1 auto;
}
@media (min-width: 768px) {
  .miz-card-group {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
  }
  .miz-card-group > * {
    flex: 1 1 auto;
  }
  .miz-card-group > .miz-card {
    margin-bottom: 0;
  }
}

.miz-card-deck {
  gap: 1.5rem;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}
.miz-card-deck > * {
  flex: 1 1 100%;
}
.miz-card-deck > .miz-card {
  margin-bottom: 1.5rem;
}
.miz-card-deck > .miz-card:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .miz-card-deck {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
  }
  .miz-card-deck > * {
    flex: 1 1 100%;
  }
  .miz-card-deck > .miz-card {
    margin-bottom: 0;
  }
}

@layer theme {
  .miz-card--special {
    --card-font-size: 1.1em;
    --card-title-font-size: 3em;
    --card-subtitle-font-size: 1.3em;
    --card-title-font-family: Manuka, fallback for Manuka, Arial, sans-serif;
    --card-subtitle-font-family: Martina Plantijn, fallback for Martina, Georgia, serif;
    --card-body-stack: 2rem 0 0 0;
  }
}