@layer component {
	.miz-card {
		--card-text-color: rgb(0, 0, 0);
		--card-background-color: transparent;
		--card-text-color-selection: rgb(0, 0, 0);
		--card-background-color-selection: rgb(255, 209, 125);
		--card-border-color: transparent;
		--card-border-width: 0;
		--card-border-style: 0;
		--card-border-radius: solid;
		--card-font-family: Open Sans, Segoe UI, tahoma, sans-serif;
		--card-font-size: 1rem;
		--card-max-width: none;
		--card-min-width: 0;
		--card-header-text-color: rgb(0, 0, 0);
		--card-header-background-color: rgb(255, 223, 165);
		--card-header-border-size: 1px;
		--card-header-border-style: solid;
		--card-header-border-color: transparent;
		--card-header-font-weight: 600;
		--card-header-space: 0.5rem 1.5rem 0.5rem 1.5rem;
		--card-body-padding: 1.5rem 1.5rem 1.5rem 1.5rem;
		--card-body-stack: 1rem 0 0 0;
		--card-title-text-color: ;
		--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;
		--flex-display: flex;
		--flex-direction: column;
		--flex-wrap: nowrap;
		--flex-flow: var(--flex-direction) var(--flex-wrap);
		--flex-justify-content: flex-start;
		--flex-align-items: stretch;
		--flex-align-content: normal;
		--flex-row-gap: 0;
		--flex-column-gap: 0;
		--flex-gap: var(--flex-row-gap) var(--flex-column-gap);
		container: card/inline-size;
		position: relative;
		display: var(--flex-display);
		isolation: isolate;
		overflow: visible;
		flex-flow: var(--flex-flow);
		justify-content: var(--flex-justify-content);
		align-items: var(--flex-align-items);
		gap: var(--flex-gap);
		--flex-item-grow: 1;
		--flex-item-shrink: 1;
		--flex-item-basis: 0;
	}
	.miz-card > * {
		flex: var(--flex-item-grow) var(--flex-item-shrink) var(--flex-item-basis);
	}
	.miz-card {
		max-width: var(--card-max-width);
		min-width: var(--card-min-width);
		background-clip: border-box;
		background-color: var(--card-background-color);
		border-width: var(--card-border-width);
		border-style: var(--card-border-style);
		border-color: var(--card-border-color);
		border-radius: var(--card-border-radius);
		color: var(--card-text-color);
		font-family: var(--card-font-family);
		font-size: var(--card-font-size);
		overflow-wrap: break-word;
	}
	.miz-card ::-moz-selection {
		color: var(--card-text-color-selection);
		background-color: var(--card-background-color-selection);
	}
	.miz-card ::selection {
		color: var(--card-text-color-selection);
		background-color: var(--card-background-color-selection);
	}
}
@layer component {
	.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;
	}
}
@layer component {
	.miz-card__body {
		--flex-display: flex;
		--flex-direction: column;
		--flex-wrap: nowrap;
		--flex-flow: var(--flex-direction) var(--flex-wrap);
		--flex-justify-content: flex-start;
		--flex-align-items: stretch;
		--flex-align-content: normal;
		--flex-row-gap: 0;
		--flex-column-gap: 0;
		--flex-gap: var(--flex-row-gap) var(--flex-column-gap);
		container: card-body/inline-size;
		position: relative;
		display: var(--flex-display);
		isolation: isolate;
		overflow: visible;
		flex-flow: var(--flex-flow);
		justify-content: var(--flex-justify-content);
		align-items: var(--flex-align-items);
		gap: var(--flex-gap);
		--flex-item-grow: 0;
		--flex-item-shrink: 1;
		--flex-item-basis: 0;
	}
	.miz-card__body > * {
		flex: var(--flex-item-grow) var(--flex-item-shrink) var(--flex-item-basis);
	}
	.miz-card__body {
		padding: var(--card-body-padding);
	}
	.miz-card__body * {
		margin-bottom: 0;
	}
	.miz-card__body > * + * {
		margin: var(--card-body-stack);
	}
}
@layer component {
	.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;
	}
}
@layer component {
	.miz-card__title-link {
		color: var(--link-text-color);
		--effect-underline-color: rgb(253, 183, 25);
		--effect-underline-thickness: 4px;
		--effect-background-image: linear-gradient(
				0deg,
				var(--effect-underline-color) 0%,
				var(--effect-underline-color) 100%
		);
		--effect-outline-width: 2px;
		--effect-outline-style: dashed;
		--effect-outline-color: rgb(253, 183, 25);
		--effect-outline-offset: 1px;
		z-index: 1;
		margin: 0 -1px -0.25rem -1px;
		padding: 0.125rem 0.125rem 0.125rem 0.125rem;
		background-image: var(--effect-background-image);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 100% var(--effect-underline-thickness);
		text-decoration: none;
		transition: background-size 0.2s ease-in-out, color 0s;
	}
	.miz-card__title-link:hover {
		background-size: 100% 100%;
	}
	.miz-card__title-link:focus-visible {
		--effect-underline-color: rgb(255, 223, 165);
		outline: 2px dashed #fdb719;
		outline: var(--effect-outline-color) var(--effect-outline-style) var(--effect-outline-width);
		outline-offset: 1px;
		background-size: 100% 100%;
	}
	.miz-card__title-link:active {
		--effect-underline-color: rgb(255, 209, 125);
		background-size: 100% 100%;
	}
}
@layer component {
	.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);
	}
}
@layer component {
	.miz-card__image {
		width: 100%;
		height: auto;
	}
}
@layer component {
	@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-text-color: rgb(0, 0, 0);
		--card-text-color-selection: rgb(0, 0, 0);
		--card-header-text-color: ;
		--card-header-background-color: rgb(255, 223, 165);
		--card-header-border-color: rgb(212, 212, 212);
		--card-subtitle-text-color: rgb(0, 0, 0);
		--card-background-color: rgb(255, 255, 255);
		--card-background-color-selection: rgb(255, 209, 125);
	}
}
@layer theme {
	.miz-card[data-theme="light"],
	*[data-theme="light"] .miz-card {
		--card-text-color: rgb(0, 0, 0);
		--card-text-color-selection: rgb(0, 0, 0);
		--card-header-text-color: ;
		--card-header-background-color: rgb(255, 223, 165);
		--card-header-border-color: rgb(212, 212, 212);
		--card-subtitle-text-color: rgb(0, 0, 0);
		--card-background-color: rgb(255, 255, 255);
		--card-background-color-selection: rgb(255, 209, 125);
	}
}
@layer modifier {
	.miz-card--medium {
		--card-text-color: rgb(0, 0, 0);
		--card-text-color-selection: rgb(0, 0, 0);
		--card-header-text-color: ;
		--card-header-background-color: rgb(212, 212, 212);
		--card-header-border-color: rgb(212, 212, 212);
		--card-subtitle-text-color: rgb(0, 0, 0);
		--card-background-color: rgb(249, 249, 249);
		--card-background-color-selection: rgb(255, 209, 125);
	}
}
@layer theme {
	.miz-card[data-theme="medium"],
	*[data-theme="medium"] .miz-card {
		--card-text-color: rgb(0, 0, 0);
		--card-text-color-selection: rgb(0, 0, 0);
		--card-header-text-color: ;
		--card-header-background-color: rgb(212, 212, 212);
		--card-header-border-color: rgb(212, 212, 212);
		--card-subtitle-text-color: rgb(0, 0, 0);
		--card-background-color: rgb(249, 249, 249);
		--card-background-color-selection: rgb(255, 209, 125);
	}
}
@layer modifier {
	.miz-card--dark {
		--card-text-color: rgb(255, 255, 255);
		--card-text-color-selection: rgb(0, 0, 0);
		--card-title-text-color: rgb(253, 183, 25);
		--card-header-text-color: ;
		--card-header-background-color: rgb(51, 51, 51);
		--card-header-border-color: rgb(96, 96, 96);
		--card-subtitle-text-color: rgb(255, 255, 255);
		--card-background-color: rgb(0, 0, 0);
		--card-background-color-selection: rgb(152, 152, 152);
	}
	.miz-card--dark .miz-card__title-link {
		color: #fff;
		--effect-underline-color: rgb(253, 183, 25);
		--effect-underline-thickness: 4px;
		--effect-background-image: linear-gradient(
				0deg,
				var(--effect-underline-color) 0%,
				var(--effect-underline-color) 100%
		);
		--effect-outline-width: 2px;
		--effect-outline-style: dashed;
		--effect-outline-color: rgb(253, 183, 25);
		--effect-outline-offset: 1px;
		z-index: 1;
		margin: 0 -1px -0.25rem -1px;
		padding: 0.125rem 0.125rem 0.125rem 0.125rem;
		background-image: var(--effect-background-image);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 100% var(--effect-underline-thickness);
		text-decoration: none;
		transition: background-size 0.2s ease-in-out, color 0s;
	}
	.miz-card--dark .miz-card__title-link:hover {
		background-size: 100% 100%;
	}
	.miz-card--dark .miz-card__title-link:focus-visible {
		--effect-underline-color: rgb(255, 223, 165);
		outline: 2px dashed #fdb719;
		outline: var(--effect-outline-color) var(--effect-outline-style)
		var(--effect-outline-width);
		outline-offset: 1px;
		background-size: 100% 100%;
	}
	.miz-card--dark .miz-card__title-link:active {
		--effect-underline-color: rgb(255, 209, 125);
		background-size: 100% 100%;
	}
	.miz-card--dark .miz-card__title-link:hover {
		color: #000;
	}
	.miz-card--dark .miz-card__title-link:focus-visible {
		color: #000;
	}
}
@layer theme {
	.miz-card[data-theme="dark"],
	*[data-theme="dark"] .miz-card {
		--card-text-color: rgb(255, 255, 255);
		--card-text-color-selection: rgb(0, 0, 0);
		--card-title-text-color: rgb(253, 183, 25);
		--card-header-text-color: ;
		--card-header-background-color: rgb(51, 51, 51);
		--card-header-border-color: rgb(96, 96, 96);
		--card-subtitle-text-color: rgb(255, 255, 255);
		--card-background-color: rgb(0, 0, 0);
		--card-background-color-selection: rgb(152, 152, 152);
	}
	.miz-card[data-theme="dark"] .miz-card__title-link,
	*[data-theme="dark"] .miz-card .miz-card__title-link {
		color: #fff;
		--effect-underline-color: rgb(253, 183, 25);
		--effect-underline-thickness: 4px;
		--effect-background-image: linear-gradient(
				0deg,
				var(--effect-underline-color) 0%,
				var(--effect-underline-color) 100%
		);
		--effect-outline-width: 2px;
		--effect-outline-style: dashed;
		--effect-outline-color: rgb(253, 183, 25);
		--effect-outline-offset: 1px;
		z-index: 1;
		margin: 0 -1px -0.25rem -1px;
		padding: 0.125rem 0.125rem 0.125rem 0.125rem;
		background-image: var(--effect-background-image);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 100% var(--effect-underline-thickness);
		text-decoration: none;
		transition: background-size 0.2s ease-in-out, color 0s;
	}
	.miz-card[data-theme="dark"] .miz-card__title-link:hover,
	*[data-theme="dark"] .miz-card .miz-card__title-link:hover {
		background-size: 100% 100%;
	}
	.miz-card[data-theme="dark"] .miz-card__title-link:focus-visible,
	*[data-theme="dark"] .miz-card .miz-card__title-link:focus-visible {
		--effect-underline-color: rgb(255, 223, 165);
		outline: 2px dashed #fdb719;
		outline: var(--effect-outline-color) var(--effect-outline-style)
		var(--effect-outline-width);
		outline-offset: 1px;
		background-size: 100% 100%;
	}
	.miz-card[data-theme="dark"] .miz-card__title-link:active,
	*[data-theme="dark"] .miz-card .miz-card__title-link:active {
		--effect-underline-color: rgb(255, 209, 125);
		background-size: 100% 100%;
	}
	.miz-card[data-theme="dark"] .miz-card__title-link:hover,
	*[data-theme="dark"] .miz-card .miz-card__title-link:hover {
		color: #000;
	}
	.miz-card[data-theme="dark"] .miz-card__title-link:focus-visible,
	*[data-theme="dark"] .miz-card .miz-card__title-link:focus-visible {
		color: #000;
	}
}
@layer modifier {
	.miz-card--gold {
		--card-text-color: rgb(0, 0, 0);
		--card-text-color-selection: rgb(0, 0, 0);
		--card-subtitle-text-color: rgb(0, 0, 0);
		--card-header-text-color: ;
		--card-header-background-color: rgb(255, 209, 125);
		--card-header-border-color: rgb(0, 0, 0);
		--card-background-color: rgb(253, 183, 25);
		--card-background-color-selection: rgb(255, 237, 207);
	}
}
@layer theme {
	.miz-card[data-theme="gold"],
	*[data-theme="gold"] .miz-card {
		--card-text-color: rgb(0, 0, 0);
		--card-text-color-selection: rgb(0, 0, 0);
		--card-subtitle-text-color: rgb(0, 0, 0);
		--card-header-text-color: ;
		--card-header-background-color: rgb(255, 209, 125);
		--card-header-border-color: rgb(0, 0, 0);
		--card-background-color: rgb(253, 183, 25);
		--card-background-color-selection: rgb(255, 237, 207);
	}
	.miz-card[data-theme="gold"] .miz-card__title-link,
	*[data-theme="gold"] .miz-card .miz-card__title-link {
		--effect-underline-color: rgb(0, 0, 0);
		--effect-underline-thickness: 4px;
		--effect-background-image: linear-gradient(
				0deg,
				var(--effect-underline-color) 0%,
				var(--effect-underline-color) 100%
		);
		--effect-outline-width: 2px;
		--effect-outline-style: dashed;
		--effect-outline-color: rgb(253, 183, 25);
		--effect-outline-offset: 1px;
		z-index: 1;
		margin: 0 -1px -0.25rem -1px;
		padding: 0.125rem 0.125rem 0.125rem 0.125rem;
		background-image: var(--effect-background-image);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 100% var(--effect-underline-thickness);
		text-decoration: none;
		transition: background-size 0.2s ease-in-out, color 0s;
	}
	.miz-card[data-theme="gold"] .miz-card__title-link:hover,
	*[data-theme="gold"] .miz-card .miz-card__title-link:hover {
		background-size: 100% 100%;
	}
	.miz-card[data-theme="gold"] .miz-card__title-link:focus-visible,
	*[data-theme="gold"] .miz-card .miz-card__title-link:focus-visible {
		--effect-underline-color: rgb(255, 223, 165);
		outline: 2px dashed #fdb719;
		outline: var(--effect-outline-color) var(--effect-outline-style)
		var(--effect-outline-width);
		outline-offset: 1px;
		background-size: 100% 100%;
	}
	.miz-card[data-theme="gold"] .miz-card__title-link:active,
	*[data-theme="gold"] .miz-card .miz-card__title-link:active {
		--effect-underline-color: rgb(255, 209, 125);
		background-size: 100% 100%;
	}
	.miz-card[data-theme="gold"] .miz-card__title-link:hover,
	*[data-theme="gold"] .miz-card .miz-card__title-link:hover {
		--link-text-color: rgb(253, 183, 25);
		--effect-underline-color: rgb(0, 0, 0);
	}
	.miz-card[data-theme="gold"] .miz-card__title-link:focus-visible,
	*[data-theme="gold"] .miz-card .miz-card__title-link:focus-visible {
		--link-text-color: rgb(253, 183, 25);
		--effect-underline-color: rgb(0, 0, 0);
		--effect-outline-color: rgb(0, 0, 0);
	}
}
@layer modifier {
	.miz-card--outline {
		--card-border-width: 1px;
		--card-border-style: solid;
		--card-border-color: rgb(212, 212, 212);
	}
	.miz-card--outline.miz-card--light,
	.miz-card--outline[data-theme="light"],
	*[data-theme="light"] .miz-card--outline {
		--card-border-color: rgb(212, 212, 212);
	}
	.miz-card--outline.miz-card--medium,
	.miz-card--outline[data-theme="medium"],
	*[data-theme="medium"] .miz-card--outline {
		--card-border-color: rgb(212, 212, 212);
	}
	.miz-card--outline.miz-card--dark,
	.miz-card--outline[data-theme="dark"],
	*[data-theme="dark"] .miz-card--outline {
		--card-border-color: rgb(96, 96, 96);
	}
	.miz-card--outline.miz-card--gold,
	.miz-card--outline[data-theme="gold"],
	*[data-theme="gold"] .miz-card--outline {
		--card-border-color: rgb(0, 0, 0);
	}
}
@layer modifier {
	@media (min-width: 768px) {
		.miz-card--inline {
			--flex-direction: row;
			--flex-align-items: stretch;
		}
		.miz-card--inline :is(.miz-card__picture),
		.miz-card--inline :has(.miz-card__picture) {
			display: flex;
			min-width: 40%;
			min-height: 200px;
			overflow: hidden;
		}
		.miz-card--inline :is(.miz-card__picture) .miz-card__image,
		.miz-card--inline :has(.miz-card__picture) .miz-card__image {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.miz-card--inline .miz-card__body {
			--flex-justify-content: flex-start;
			--flex-align-content: flex-start;
		}
	}
}
@layer modifier {
	.miz-card__body--flush {
		padding-right: 0;
		padding-left: 0;
	}
}
@layer modifier {
	.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;
	}
}
@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;
		--card-subtitle-font-family: Martina Plantijn;
		--card-body-stack: 2rem 0 0 0;
	}
}