@charset "UTF-8";

/* Global styles */
:root,
:host {
    --font-family-sans: "Arial", sans-serif;
    --font-family-serif: "Times New Roman", serif;
    --font-family-mono: "Courier New", sans-serif;
    --font-size: 16px;
    --font-weight: 400;
    --line-height: var(--line-height-dense);
    --text-color: var(--foreground);
    --link-color: var(--color-brand-600);
    /* Font sizes */
    --font-size-2x-small: 0.625rem;
    --font-size-x-small: 0.75rem;
    --font-size-small: 0.875rem;
    --font-size-medium: 1rem;
    --font-size-large: 1.25rem;
    --font-size-x-large: 1.5rem;
    --font-size-2x-large: 2.25rem;
    --font-size-3x-large: 3rem;
    --font-size-4x-large: 4rem;
    /* Font weights */
    --font-weight-x-light: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;
    --font-weight-x-black: 900;
    /* Line heights */
    --line-height-denser: 1;
    --line-height-dense: 1.4;
    --line-height-normal: 1.8;
    --line-height-loose: 2.2;
    --line-height-looser: 2.6;
    /* Letter spacing */
    --letter-spacing-denser: -0.03em;
    --letter-spacing-dense: -0.015em;
    --letter-spacing-normal: normal;
    --letter-spacing-loose: 0.075em;
    --letter-spacing-looser: 0.15em;
    /* Spacings */
    --spacing-3x-small: 0.125rem;
    --spacing-2x-small: 0.25rem;
    --spacing-x-small: 0.5rem;
    --spacing-small: 0.75rem;
    --spacing-medium: 1rem;
    --spacing-large: 1.25rem;
    --spacing-x-large: 1.75rem;
    --spacing-2x-large: 2.25rem;
    --spacing-3x-large: 3rem;
    --spacing-4x-large: 4rem;
    /* Border radius */
    --border-radius-xxl: 0.5rem;
    --border-radius-xl: 0.375rem;
    --border-radius-lg: 0.25rem;
    --border-radius-md: 0.125rem;
    --border-radius-sm: 0.0625rem;
    --border-radius-xs: 0.03125rem;
    --border-radius-xxs: 0.015625rem;
    --border-radius-none: 0;
    --border-radius-full: 9999px;
    /* Colors */
    --focus-ring-border: solid 1px #0A74FF;
    --focus-ring-shadow: 0 0 0 1px #0A74FF;
}

*:not(umb-tiptap-toolbar, svg) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-size);
    font-style: normal;
    font-weight: var(--font-weight);
    font-feature-settings: var(--font-feature-settings);
    line-height: var(--line-height);
    text-decoration: none;
    list-style: none;
    border: none;
    outline: none;
    background: none;
    color: var(--foreground, var(--text-color));
    -webkit-font-smoothing: antialiased;
    z-index: 1;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.is-cookies-settings-open {
    background-image: none !important;
    background: #FFF;
}

body.is-cookies-settings-open header,
body.is-cookies-settings-open main,
body.is-cookies-settings-open footer,
body.is-cookies-settings-open aside,
body.is-cookies-settings-open .page-content-container,
body.is-cookies-settings-open .body-bg-image,
body.is-cookies-settings-open .section-main-navigation {
    display: none;
}

@media screen and (max-width: 767px) {
    body {
        padding: var(--body-padding-mobile, 0);
    }
}

@media screen and (min-width: 768px) {
    body {
        padding: var(--body-padding-desktop, 0);
    }
}

body main {
    flex: 1;
    background: var(--background, transparent);
    z-index: 0;
}

@media screen and (max-width: 767px) {
    body main {
        padding: var(--main-padding-mobile, inherit);
    }
}

@media screen and (min-width: 768px) {
    body main {
        padding: var(--main-padding-desktop, inherit);
    }
}

a {
    color: var(--link-color);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

a.link {
    --padding: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media screen and (max-width: 767px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .hide-on-tablet {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    .hide-on-desktop {
        display: none !important;
    }
}

.flexible-fullwidth-item {
    flex: 1 1 auto;
    width: 100%;
}

.has-highlighted-item > *:first-child {
    grid-column: 1/-1;
}

.container-media {
    container-type: inline-size;
}

.with-border {
    border: var(--border);
    border-radius: var(--border-radius);
}

.with-shadow {
    box-shadow: var(--shadow);
}

.relative-position {
    position: relative;
    z-index: 0;
}

.absolute-position {
    position: absolute;
    z-index: 10;
}

.invisible {
    visibility: hidden;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 0 !important;
    border: 0 !important;
}

.link-area {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
    opacity: 0;
}

.transparent {
    --background: transparent !important;
}

.success {
    --foreground: var(--success-color, green);
}

.danger {
    --foreground: var(--danger-color, red);
}

.warning {
    --foreground: var(--warning-color, orange);
}

.faded {
    --foreground: var(--faded-color, rgba(0, 0, 0, 0.5));
}

.striked {
    text-decoration: line-through;
}

.expired {
    filter: grayscale(100%);
}

.flip-horizontal {
    transform: scaleX(-1);
}

.flip-vertical {
    transform: scaleY(-1);
}

.background--transparent {
    --background: transparent;
}

.background--white-50 {
    --background: var(--color-white-50);
}

.background--white-100 {
    --background: var(--color-white-100);
}

.background--gray-light {
    --background: var(--color-gray-light);
}

.background--gray-solid {
    --background: var(--color-gray-solid);
}

.background--brand-light {
    --background: var(--color-brand-light);
}

.background--brand-solid {
    --background: var(--color-brand-solid);
}

*[class*=overlay] {
    position: relative;
}

*[class*=overlay] > *:not(.background-layer) {
    position: relative;
    z-index: 2;
}

*[class*=overlay]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay, rgba(0, 0, 0, 0.5));
    pointer-events: none;
    z-index: 1;
}

*[class*=overlay].overlay--transparent::before {
    --overlay: transparent;
}

*[class*=overlay].overlay--25::before {
    --overlay: var(--overlay-25-color, rgba(0, 0, 0, 0.25));
}

*[class*=overlay].overlay--50::before {
    --overlay: var(--overlay-50-color, rgba(0, 0, 0, 0.5));
}

section,
header,
footer {
    --section-width: 100%;
    --section-wrapper-width: var(--wide-content-width);
    --wide-content-width: var(--section-wide-content-width, 1200px);
    --narrow-content-width: var(--section-narrow-content-width, 740px);
    width: 100%;
}

section > .wrapper,
header > .wrapper,
footer > .wrapper {
    gap: 0;
    color: inherit;
    width: var(--section-wrapper-width);
    max-width: 100%;
    margin-inline: auto;
}

section > .wrapper > .section__body,
header > .wrapper > .section__body,
footer > .wrapper > .section__body {
    width: var(--section-width);
    max-width: 100%;
}

section.narrow-content > .wrapper,
header.narrow-content > .wrapper,
footer.narrow-content > .wrapper {
    width: var(--section-wrapper-width);
}

section.narrow-content > .wrapper > .section__body,
header.narrow-content > .wrapper > .section__body,
footer.narrow-content > .wrapper > .section__body {
    width: var(--narrow-content-width);
}

section.wide-content > .wrapper,
header.wide-content > .wrapper,
footer.wide-content > .wrapper {
    --section-wrapper-width: var(--wide-content-width);
}

section.full-content > .wrapper,
header.full-content > .wrapper,
footer.full-content > .wrapper {
    --section-wrapper-width: 100%;
}

section.fullwidth,
header.fullwidth,
footer.fullwidth {
    --section-border-radius: 0;
    --image-border-radius: 0;
    --section-width: 100%;
    max-width: 100%;
}

section:not(.fullwidth),
header:not(.fullwidth),
footer:not(.fullwidth) {
    margin: auto;
    width: var(--wide-content-width);
    max-width: 100%;
}

main {
    display: flex;
    flex-direction: column;
}

main > section:last-child {
    flex: 1;
}

.vertical-align--top {
    align-content: start;
    --layout-columns-align-items: flex-start;
}

.vertical-align--center {
    align-content: center;
    --layout-columns-align-items: center;
}

.vertical-align--bottom {
    align-content: end;
    --layout-columns-align-items: flex-end;
}

.horizontal-align--left .wrapper,
.horizontal-align--left .wrapper > .section__body {
    display: flex;
    flex-direction: column;
    justify-items: start;
    align-items: flex-start;
}

.horizontal-align--center .wrapper,
.horizontal-align--center .wrapper > .section__body {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    margin-inline: auto;
}

.horizontal-align--right .wrapper,
.horizontal-align--right .wrapper > .section__body {
    display: flex;
    flex-direction: column;
    justify-items: end;
    align-items: flex-end;
    margin-left: auto;
}

@media screen and (max-width: 768px) {

    .horizontal-align--right .wrapper,
    .horizontal-align--right .wrapper > .section__body {
        display: flex;
        flex-direction: column;
        justify-items: start;
        align-items: flex-start;
    }
}

@media screen and (max-width: 767px) {

    h1,
    .h1 {
        font-size: var(--h1-font-size-mobile, inherit);
        font-weight: var(--h1-font-weight-mobile, inherit);
        line-height: var(--h1-line-height-mobile, inherit);
        letter-spacing: var(--h1-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

    h1,
    .h1 {
        font-size: var(--h1-font-size-tablet, inherit);
        font-weight: var(--h1-font-weight-tablet, inherit);
        line-height: var(--h1-line-height-tablet, inherit);
        letter-spacing: var(--h1-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {

    h1,
    .h1 {
        font-size: var(--h1-font-size-desktop, inherit);
        font-weight: var(--h1-font-weight-desktop, inherit);
        line-height: var(--h1-line-height-desktop, inherit);
        letter-spacing: var(--h1-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {

    h1,
    .h1 {
        font-size: var(--h1-font-size-wide, inherit);
        font-weight: var(--h1-font-weight-wide, inherit);
        line-height: var(--h1-line-height-wide, inherit);
        letter-spacing: var(--h1-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {

    h2,
    .h2 {
        font-size: var(--h2-font-size-mobile, inherit);
        font-weight: var(--h2-font-weight-mobile, inherit);
        line-height: var(--h2-line-height-mobile, inherit);
        letter-spacing: var(--h2-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

    h2,
    .h2 {
        font-size: var(--h2-font-size-tablet, inherit);
        font-weight: var(--h2-font-weight-tablet, inherit);
        line-height: var(--h2-line-height-tablet, inherit);
        letter-spacing: var(--h2-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {

    h2,
    .h2 {
        font-size: var(--h2-font-size-desktop, inherit);
        font-weight: var(--h2-font-weight-desktop, inherit);
        line-height: var(--h2-line-height-desktop, inherit);
        letter-spacing: var(--h2-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {

    h2,
    .h2 {
        font-size: var(--h2-font-size-wide, inherit);
        font-weight: var(--h2-font-weight-wide, inherit);
        line-height: var(--h2-line-height-wide, inherit);
        letter-spacing: var(--h2-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {

    h3,
    .h3 {
        font-size: var(--h3-font-size-mobile, inherit);
        font-weight: var(--h3-font-weight-mobile, inherit);
        line-height: var(--h3-line-height-mobile, inherit);
        letter-spacing: var(--h3-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

    h3,
    .h3 {
        font-size: var(--h3-font-size-tablet, inherit);
        font-weight: var(--h3-font-weight-tablet, inherit);
        line-height: var(--h3-line-height-tablet, inherit);
        letter-spacing: var(--h3-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {

    h3,
    .h3 {
        font-size: var(--h3-font-size-desktop, inherit);
        font-weight: var(--h3-font-weight-desktop, inherit);
        line-height: var(--h3-line-height-desktop, inherit);
        letter-spacing: var(--h3-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {

    h3,
    .h3 {
        font-size: var(--h3-font-size-wide, inherit);
        font-weight: var(--h3-font-weight-wide, inherit);
        line-height: var(--h3-line-height-wide, inherit);
        letter-spacing: var(--h3-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {

    h4,
    .h4 {
        font-size: var(--h4-font-size-mobile, inherit);
        font-weight: var(--h4-font-weight-mobile, inherit);
        line-height: var(--h4-line-height-mobile, inherit);
        letter-spacing: var(--h4-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

    h4,
    .h4 {
        font-size: var(--h4-font-size-tablet, inherit);
        font-weight: var(--h4-font-weight-tablet, inherit);
        line-height: var(--h4-line-height-tablet, inherit);
        letter-spacing: var(--h4-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {

    h4,
    .h4 {
        font-size: var(--h4-font-size-desktop, inherit);
        font-weight: var(--h4-font-weight-desktop, inherit);
        line-height: var(--h4-line-height-desktop, inherit);
        letter-spacing: var(--h4-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {

    h4,
    .h4 {
        font-size: var(--h4-font-size-wide, inherit);
        font-weight: var(--h4-font-weight-wide, inherit);
        line-height: var(--h4-line-height-wide, inherit);
        letter-spacing: var(--h4-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {
    .display-xs {
        font-size: var(--display-xs-font-size-mobile, inherit);
        font-weight: var(--display-xs-font-weight-mobile, inherit);
        line-height: var(--display-xs-line-height-mobile, inherit);
        letter-spacing: var(--display-xs-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .display-xs {
        font-size: var(--display-xs-font-size-tablet, inherit);
        font-weight: var(--display-xs-font-weight-tablet, inherit);
        line-height: var(--display-xs-line-height-tablet, inherit);
        letter-spacing: var(--display-xs-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    .display-xs {
        font-size: var(--display-xs-font-size-desktop, inherit);
        font-weight: var(--display-xs-font-weight-desktop, inherit);
        line-height: var(--display-xs-line-height-desktop, inherit);
        letter-spacing: var(--display-xs-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {
    .display-xs {
        font-size: var(--display-xs-font-size-wide, inherit);
        font-weight: var(--display-xs-font-weight-wide, inherit);
        line-height: var(--display-xs-line-height-wide, inherit);
        letter-spacing: var(--display-xs-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {
    .display-sm {
        font-size: var(--display-sm-font-size-mobile, inherit);
        font-weight: var(--display-sm-font-weight-mobile, inherit);
        line-height: var(--display-sm-line-height-mobile, inherit);
        letter-spacing: var(--display-sm-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .display-sm {
        font-size: var(--display-sm-font-size-tablet, inherit);
        font-weight: var(--display-sm-font-weight-tablet, inherit);
        line-height: var(--display-sm-line-height-tablet, inherit);
        letter-spacing: var(--display-sm-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    .display-sm {
        font-size: var(--display-sm-font-size-desktop, inherit);
        font-weight: var(--display-sm-font-weight-desktop, inherit);
        line-height: var(--display-sm-line-height-desktop, inherit);
        letter-spacing: var(--display-sm-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {
    .display-sm {
        font-size: var(--display-sm-font-size-wide, inherit);
        font-weight: var(--display-sm-font-weight-wide, inherit);
        line-height: var(--display-sm-line-height-wide, inherit);
        letter-spacing: var(--display-sm-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {
    .display-md {
        font-size: var(--display-md-font-size-mobile, inherit);
        font-weight: var(--display-md-font-weight-mobile, inherit);
        line-height: var(--display-md-line-height-mobile, inherit);
        letter-spacing: var(--display-md-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .display-md {
        font-size: var(--display-md-font-size-tablet, inherit);
        font-weight: var(--display-md-font-weight-tablet, inherit);
        line-height: var(--display-md-line-height-tablet, inherit);
        letter-spacing: var(--display-md-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    .display-md {
        font-size: var(--display-md-font-size-desktop, inherit);
        font-weight: var(--display-md-font-weight-desktop, inherit);
        line-height: var(--display-md-line-height-desktop, inherit);
        letter-spacing: var(--display-md-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {
    .display-md {
        font-size: var(--display-md-font-size-wide, inherit);
        font-weight: var(--display-md-font-weight-wide, inherit);
        line-height: var(--display-md-line-height-wide, inherit);
        letter-spacing: var(--display-md-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {
    .display-lg {
        font-size: var(--display-lg-font-size-mobile, inherit);
        font-weight: var(--display-lg-font-weight-mobile, inherit);
        line-height: var(--display-lg-line-height-mobile, inherit);
        letter-spacing: var(--display-lg-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .display-lg {
        font-size: var(--display-lg-font-size-tablet, inherit);
        font-weight: var(--display-lg-font-weight-tablet, inherit);
        line-height: var(--display-lg-line-height-tablet, inherit);
        letter-spacing: var(--display-lg-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    .display-lg {
        font-size: var(--display-lg-font-size-desktop, inherit);
        font-weight: var(--display-lg-font-weight-desktop, inherit);
        line-height: var(--display-lg-line-height-desktop, inherit);
        letter-spacing: var(--display-lg-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {
    .display-lg {
        font-size: var(--display-lg-font-size-wide, inherit);
        font-weight: var(--display-lg-font-weight-wide, inherit);
        line-height: var(--display-lg-line-height-wide, inherit);
        letter-spacing: var(--display-lg-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {
    .display-xl {
        font-size: var(--display-xl-font-size-mobile, inherit);
        font-weight: var(--display-xl-font-weight-mobile, inherit);
        line-height: var(--display-xl-line-height-mobile, inherit);
        letter-spacing: var(--display-xl-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .display-xl {
        font-size: var(--display-xl-font-size-tablet, inherit);
        font-weight: var(--display-xl-font-weight-tablet, inherit);
        line-height: var(--display-xl-line-height-tablet, inherit);
        letter-spacing: var(--display-xl-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    .display-xl {
        font-size: var(--display-xl-font-size-desktop, inherit);
        font-weight: var(--display-xl-font-weight-desktop, inherit);
        line-height: var(--display-xl-line-height-desktop, inherit);
        letter-spacing: var(--display-xl-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {
    .display-xl {
        font-size: var(--display-xl-font-size-wide, inherit);
        font-weight: var(--display-xl-font-weight-wide, inherit);
        line-height: var(--display-xl-line-height-wide, inherit);
        letter-spacing: var(--display-xl-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {
    .display-2xl {
        font-size: var(--display-2xl-font-size-mobile, inherit);
        font-weight: var(--display-2xl-font-weight-mobile, inherit);
        line-height: var(--display-2xl-line-height-mobile, inherit);
        letter-spacing: var(--display-2xl-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .display-2xl {
        font-size: var(--display-2xl-font-size-tablet, inherit);
        font-weight: var(--display-2xl-font-weight-tablet, inherit);
        line-height: var(--display-2xl-line-height-tablet, inherit);
        letter-spacing: var(--display-2xl-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    .display-2xl {
        font-size: var(--display-2xl-font-size-desktop, inherit);
        font-weight: var(--display-2xl-font-weight-desktop, inherit);
        line-height: var(--display-2xl-line-height-desktop, inherit);
        letter-spacing: var(--display-2xl-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {
    .display-2xl {
        font-size: var(--display-2xl-font-size-wide, inherit);
        font-weight: var(--display-2xl-font-weight-wide, inherit);
        line-height: var(--display-2xl-line-height-wide, inherit);
        letter-spacing: var(--display-2xl-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {
    .text-xs {
        font-size: var(--text-xs-font-size-mobile, inherit);
        font-weight: var(--text-xs-font-weight-mobile, inherit);
        line-height: var(--text-xs-line-height-mobile, inherit);
        letter-spacing: var(--text-xs-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .text-xs {
        font-size: var(--text-xs-font-size-tablet, inherit);
        font-weight: var(--text-xs-font-weight-tablet, inherit);
        line-height: var(--text-xs-line-height-tablet, inherit);
        letter-spacing: var(--text-xs-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    .text-xs {
        font-size: var(--text-xs-font-size-desktop, inherit);
        font-weight: var(--text-xs-font-weight-desktop, inherit);
        line-height: var(--text-xs-line-height-desktop, inherit);
        letter-spacing: var(--text-xs-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {
    .text-xs {
        font-size: var(--text-xs-font-size-wide, inherit);
        font-weight: var(--text-xs-font-weight-wide, inherit);
        line-height: var(--text-xs-line-height-wide, inherit);
        letter-spacing: var(--text-xs-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {
    .text-sm {
        font-size: var(--text-sm-font-size-mobile, inherit);
        font-weight: var(--text-sm-font-weight-mobile, inherit);
        line-height: var(--text-sm-line-height-mobile, inherit);
        letter-spacing: var(--text-sm-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .text-sm {
        font-size: var(--text-sm-font-size-tablet, inherit);
        font-weight: var(--text-sm-font-weight-tablet, inherit);
        line-height: var(--text-sm-line-height-tablet, inherit);
        letter-spacing: var(--text-sm-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    .text-sm {
        font-size: var(--text-sm-font-size-desktop, inherit);
        font-weight: var(--text-sm-font-weight-desktop, inherit);
        line-height: var(--text-sm-line-height-desktop, inherit);
        letter-spacing: var(--text-sm-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {
    .text-sm {
        font-size: var(--text-sm-font-size-wide, inherit);
        font-weight: var(--text-sm-font-weight-wide, inherit);
        line-height: var(--text-sm-line-height-wide, inherit);
        letter-spacing: var(--text-sm-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {

    p,
    address,
    ul,
    ol,
    li,
    dl,
    dt,
    dd,
    table,
    th,
    td,
    figcaption,
    .text-md {
        font-size: var(--text-md-font-size-mobile, inherit);
        font-weight: var(--text-md-font-weight-mobile, inherit);
        line-height: var(--text-md-line-height-mobile, inherit);
        letter-spacing: var(--text-md-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

    p,
    address,
    ul,
    ol,
    li,
    dl,
    dt,
    dd,
    table,
    th,
    td,
    figcaption,
    .text-md {
        font-size: var(--text-md-font-size-tablet, inherit);
        font-weight: var(--text-md-font-weight-tablet, inherit);
        line-height: var(--text-md-line-height-tablet, inherit);
        letter-spacing: var(--text-md-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {

    p,
    address,
    ul,
    ol,
    li,
    dl,
    dt,
    dd,
    table,
    th,
    td,
    figcaption,
    .text-md {
        font-size: var(--text-md-font-size-desktop, inherit);
        font-weight: var(--text-md-font-weight-desktop, inherit);
        line-height: var(--text-md-line-height-desktop, inherit);
        letter-spacing: var(--text-md-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {

    p,
    address,
    ul,
    ol,
    li,
    dl,
    dt,
    dd,
    table,
    th,
    td,
    figcaption,
    .text-md {
        font-size: var(--text-md-font-size-wide, inherit);
        font-weight: var(--text-md-font-weight-wide, inherit);
        line-height: var(--text-md-line-height-wide, inherit);
        letter-spacing: var(--text-md-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {
    .text-lg {
        font-size: var(--text-lg-font-size-mobile, inherit);
        font-weight: var(--text-lg-font-weight-mobile, inherit);
        line-height: var(--text-lg-line-height-mobile, inherit);
        letter-spacing: var(--text-lg-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .text-lg {
        font-size: var(--text-lg-font-size-tablet, inherit);
        font-weight: var(--text-lg-font-weight-tablet, inherit);
        line-height: var(--text-lg-line-height-tablet, inherit);
        letter-spacing: var(--text-lg-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    .text-lg {
        font-size: var(--text-lg-font-size-desktop, inherit);
        font-weight: var(--text-lg-font-weight-desktop, inherit);
        line-height: var(--text-lg-line-height-desktop, inherit);
        letter-spacing: var(--text-lg-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {
    .text-lg {
        font-size: var(--text-lg-font-size-wide, inherit);
        font-weight: var(--text-lg-font-weight-wide, inherit);
        line-height: var(--text-lg-line-height-wide, inherit);
        letter-spacing: var(--text-lg-letter-spacing-wide, inherit);
    }
}

@media screen and (max-width: 767px) {

    .text-xl,
    td h4 {
        font-size: var(--text-xl-font-size-mobile, inherit);
        font-weight: var(--text-xl-font-weight-mobile, inherit);
        line-height: var(--text-xl-line-height-mobile, inherit);
        letter-spacing: var(--text-xl-letter-spacing-mobile, inherit);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

    .text-xl,
    td h4 {
        font-size: var(--text-xl-font-size-tablet, inherit);
        font-weight: var(--text-xl-font-weight-tablet, inherit);
        line-height: var(--text-xl-line-height-tablet, inherit);
        letter-spacing: var(--text-xl-letter-spacing-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {

    .text-xl,
    td h4 {
        font-size: var(--text-xl-font-size-desktop, inherit);
        font-weight: var(--text-xl-font-weight-desktop, inherit);
        line-height: var(--text-xl-line-height-desktop, inherit);
        letter-spacing: var(--text-xl-letter-spacing-desktop, inherit);
    }
}

@media screen and (min-width: 1440px) {

    .text-xl,
    td h4 {
        font-size: var(--text-xl-font-size-wide, inherit);
        font-weight: var(--text-xl-font-weight-wide, inherit);
        line-height: var(--text-xl-line-height-wide, inherit);
        letter-spacing: var(--text-xl-letter-spacing-wide, inherit);
    }
}

.x-light {
    font-weight: var(--font-weight-x-light);
}

.light {
    font-weight: var(--font-weight-light);
}

.regular {
    font-weight: var(--font-weight-normal);
}

.medium {
    font-weight: var(--font-weight-medium);
}

.text--black {
    --text-color: var(--color-fg-black, black);
    --foreground: var(--color-fg-black, black);
}

.text--gray {
    --text-color: var(--color-fg-gray, gray);
    --foreground: var(--color-fg-gray, gray);
}

.text--white {
    --text-color: var(--color-fg-white, white);
    --foreground: var(--color-fg-white, white);
}

.semibold,
strong,
b {
    font-weight: var(--font-weight-semibold);
}

.bold {
    font-weight: var(--font-weight-bold);
}

.black {
    font-weight: var(--font-weight-black);
}

.x-black {
    font-weight: var(--font-weight-x-black);
}

.italic,
em,
i {
    font-style: italic;
}

ul,
ol {
    padding: var(--list-padding, 0);
    margin: var(--list-margin, 0);
    font-size: inherit;
    line-height: inherit;
}

ul ol + li,
ul ul + li,
ol ol + li,
ol ul + li {
    margin-top: 1em;
}

ul li,
ol li {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

ul li:not(:last-child),
ol li:not(:last-child) {
    margin-bottom: var(--list-item-margin-bottom);
}

ol {
    list-style-type: none;
}

ol:not(li > ol) {
    counter-reset: level-1 level-2 level-3 level-4 level-5;
}

ol > li {
    counter-increment: level-1;
    padding-left: var(--list-ordered-item-padding-left-level-1, 1rem);
    position: relative;
}

ol > li > *:first-child::before {
    content: counter(level-1) ".";
    position: absolute;
    left: 0;
    top: 0;
    line-height: inherit;
}

ol > li > ol {
    margin: var(--list-nested-margin) !important;
    margin-left: var(--list-ordered-item-padding-left-level-2, 2rem);
    counter-reset: level-2;
}

ol > li > ol > li {
    counter-increment: level-2;
    list-style-type: none;
    padding-left: var(--list-ordered-item-padding-left-level-2, 2rem);
}

ol > li > ol > li > *:first-child::before {
    content: counter(level-1) "." counter(level-2);
    position: absolute;
    left: 0;
    top: 0;
    line-height: inherit;
}

ol > li > ol > li > ol {
    margin: var(--list-nested-margin) !important;
    margin-left: var(--list-ordered-item-padding-left-level-3, 2.75rem);
    counter-reset: level-3;
}

ol > li > ol > li > ol > li {
    counter-increment: level-3;
    padding-left: var(--list-ordered-item-padding-left-level-3, 2.75rem);
}

ol > li > ol > li > ol > li > *:first-child::before {
    content: counter(level-1) "." counter(level-2) "." counter(level-3);
}

ol > li > ol > li > ol > li > ol {
    margin: var(--list-nested-margin) !important;
    margin-left: var(--list-ordered-item-padding-left-level-4, 1.5rem);
    counter-reset: level-4;
}

ol > li > ol > li > ol > li > ol > li {
    counter-increment: level-4;
    padding-left: var(--list-ordered-item-padding-left-level-4, 1.5rem);
}

ol > li > ol > li > ol > li > ol > li > *:first-child::before {
    content: counter(level-4, lower-alpha) ")";
}

ol > li > ol > li > ol > li > ol > li > ol {
    margin: var(--list-nested-margin) !important;
    margin-left: var(--list-ordered-item-padding-left-level-5, 1.5rem);
    counter-reset: level-5;
}

ol > li > ol > li > ol > li > ol > li > ol > li {
    counter-increment: level-5;
    padding-left: var(--list-ordered-item-padding-left-level-5, 1.5rem);
}

ol > li > ol > li > ol > li > ol > li > ol > li > *:first-child::before {
    content: counter(level-5, lower-roman) ")";
}

ul {
    list-style: none;
}

ul > li {
    padding-left: var(--list-unsorted-item-padding-left-level-1);
    position: relative;
}

ul > li::before {
    content: var(--list-unsorted-bullet-symbol-level-1);
    position: absolute;
    left: 0;
    top: 0;
    line-height: inherit;
}

ul > li ul {
    margin: var(--list-nested-margin);
}

ul > li ul > li {
    padding-left: var(--list-unsorted-item-padding-left-level-2);
}

ul > li ul > li::before {
    content: var(--list-unsorted-bullet-symbol-level-2);
    position: absolute;
    left: 0;
    top: 0;
    line-height: inherit;
}

ul.checklist,
ol.checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.checklist li,
ol.checklist li {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: var(--list-checklist-item-gap, 12px);
    position: relative;
    padding: 0;
}

ul.checklist li::before,
ol.checklist li::before {
    content: var(--list-checklist-bullet-symbol, "✅");
    position: relative;
    line-height: inherit;
    margin-top: var(--list-checklist-bullet-vertical-offset, 0);
}

.reset ol,
.reset ul,
.reset li {
    all: unset;
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

.reset ol::after,
.reset ol::before,
.reset ul::after,
.reset ul::before,
.reset li::after,
.reset li::before {
    display: none;
}

h1,
h2,
h3,
h4,
p,
address,
ul,
ol,
li,
dl,
dt,
dd {
    max-width: var(--max-content-width, inherit);
    width: 100%;
}

h1.fullwidth,
h2.fullwidth,
h3.fullwidth,
h4.fullwidth,
p.fullwidth,
address.fullwidth,
ul.fullwidth,
ol.fullwidth,
li.fullwidth,
dl.fullwidth,
dt.fullwidth,
dd.fullwidth {
    --max-content-width: 100%;
}

.layout.apply-margins + *,
.grid.apply-margins + *,
picture.apply-margins + *,
figure.apply-margins + *,
img.apply-margins + * {
    margin-top: var(--default-margin-top, inherit);
}

* + *:not(.layout--button-set):not(.layout--badge-set):not(.layout--tiles):not(.layout-signpost):not(h1):not(h2):not(h3):not(h4).apply-margins,
* + .layout:not(.layout--button-set):not(.layout--badge-set):not(.layout--tiles):not(.layout--signpost).apply-margins,
* + .grid.apply-margins,
* + picture.apply-margins,
* + figure.apply-margins,
* + img.apply-margins {
    margin-top: var(--default-margin-top, inherit);
}

.layout--badge-set.apply-margins + * {
    margin-top: var(--default-margin-top, inherit);
}

*.apply-margins + * {
    margin-top: var(--default-margin-top, inherit);
}

*.apply-margins + .layout--button-set {
    margin-top: var(--buttons-margin-top, inherit);
}

*.apply-margins + .layout--badge-set {
    margin-top: var(--badges-margin-top, inherit);
}

[class*=body] > * + p {
    margin-top: 12px;
}

@media screen and (max-width: 767px) {

    h1:not(:first-child),
    h1 + .apply-margins {
        margin-top: var(--h1-margin-top-mobile, 40px);
    }

    h1:not(:last-child) {
        margin-bottom: var(--h1-margin-bottom-mobile, 20px);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

    h1:not(:first-child),
    h1 + .apply-margins {
        margin-top: var(--h1-margin-top-tablet, 40px);
    }

    h1:not(:last-child) {
        margin-bottom: var(--h1-margin-bottom-tablet, 20px);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {

    h1:not(:first-child),
    h1 + .apply-margins {
        margin-top: var(--h1-margin-top-desktop, 48px);
    }

    h1:not(:last-child) {
        margin-bottom: var(--h1-margin-bottom-desktop, 24px);
    }
}

@media screen and (min-width: 1440px) {

    h1:not(:first-child),
    h1 + .apply-margins {
        margin-top: var(--h1-margin-top-wide, 48px);
    }

    h1:not(:last-child) {
        margin-bottom: var(--h1-margin-bottom-wide, 24px);
    }
}

@media screen and (max-width: 767px) {

    h2:not(:first-child),
    h2 + .apply-margins {
        margin-top: var(--h2-margin-top-mobile, 32px);
    }

    h2:not(:last-child) {
        margin-bottom: var(--h2-margin-bottom-mobile, 16px);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

    h2:not(:first-child),
    h2 + .apply-margins {
        margin-top: var(--h2-margin-top-tablet, 32px);
    }

    h2:not(:last-child) {
        margin-bottom: var(--h2-margin-bottom-tablet, 16px);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {

    h2:not(:first-child),
    h2 + .apply-margins {
        margin-top: var(--h2-margin-top-desktop, 40px);
    }

    h2:not(:last-child) {
        margin-bottom: var(--h2-margin-bottom-desktop, 20px);
    }
}

@media screen and (min-width: 1440px) {

    h2:not(:first-child),
    h2 + .apply-margins {
        margin-top: var(--h2-margin-top-wide, 40px);
    }

    h2:not(:last-child) {
        margin-bottom: var(--h2-margin-bottom-wide, 20px);
    }
}

@media screen and (max-width: 767px) {

    h3:not(:first-child),
    h3 + .apply-margins {
        margin-top: var(--h3-margin-top-mobile, 32px);
    }

    h3:not(:last-child) {
        margin-bottom: var(--h3-margin-bottom-mobile, 12px);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

    h3:not(:first-child),
    h3 + .apply-margins {
        margin-top: var(--h3-margin-top-tablet, 32px);
    }

    h3:not(:last-child) {
        margin-bottom: var(--h3-margin-bottom-tablet, 12px);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {

    h3:not(:first-child),
    h3 + .apply-margins {
        margin-top: var(--h3-margin-top-desktop, 32px);
    }

    h3:not(:last-child) {
        margin-bottom: var(--h3-margin-bottom-desktop, 16px);
    }
}

@media screen and (min-width: 1440px) {

    h3:not(:first-child),
    h3 + .apply-margins {
        margin-top: var(--h3-margin-top-wide, 32px);
    }

    h3:not(:last-child) {
        margin-bottom: var(--h3-margin-bottom-wide, 16px);
    }
}

@media screen and (max-width: 767px) {

    h4:not(:first-child),
    h4 + .apply-margins {
        margin-top: var(--h4-margin-top-mobile, 20px);
    }

    h4:not(:last-child) {
        margin-bottom: var(--h4-margin-bottom-mobile, 8px);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

    h4:not(:first-child),
    h4 + .apply-margins {
        margin-top: var(--h4-margin-top-tablet, 20px);
    }

    h4:not(:last-child) {
        margin-bottom: var(--h4-margin-bottom-tablet, 8px);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {

    h4:not(:first-child),
    h4 + .apply-margins {
        margin-top: var(--h4-margin-top-desktop, 32px);
    }

    h4:not(:last-child) {
        margin-bottom: var(--h4-margin-bottom-desktop, 12px);
    }
}

@media screen and (min-width: 1440px) {

    h4:not(:first-child),
    h4 + .apply-margins {
        margin-top: var(--h4-margin-top-wide, 32px);
    }

    h4:not(:last-child) {
        margin-bottom: var(--h4-margin-bottom-wide, 12px);
    }
}

h1 + .layout--button-set,
h1 + .box-button,
h1 + .icon-button,
h1 + .link-button,
h2 + .layout--button-set,
h2 + .box-button,
h2 + .icon-button,
h2 + .link-button,
h3 + .layout--button-set,
h3 + .box-button,
h3 + .icon-button,
h3 + .link-button,
h4 + .layout--button-set,
h4 + .box-button,
h4 + .icon-button,
h4 + .link-button,
p + .layout--button-set,
p + .box-button,
p + .icon-button,
p + .link-button,
ul + .layout--button-set,
ul + .box-button,
ul + .icon-button,
ul + .link-button,
ol + .layout--button-set,
ol + .box-button,
ol + .icon-button,
ol + .link-button,
table + .layout--button-set,
table + .box-button,
table + .icon-button,
table + .link-button {
    margin-top: var(--buttons-margin-top, 20px);
}

@media screen and (max-width: 767px) {

    p:not(:first-child),
    ul:not(:first-child),
    ol:not(:first-child),
    dl:not(:first-child),
    table:not(:first-child) {
        margin-top: var(--p-margin-top-mobile, 0);
    }

    p:not(:last-child),
    ul:not(:last-child),
    ol:not(:last-child),
    dl:not(:last-child),
    table:not(:last-child) {
        margin-bottom: var(--p-margin-bottom-mobile, 16px);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

    p:not(:first-child),
    ul:not(:first-child),
    ol:not(:first-child),
    dl:not(:first-child),
    table:not(:first-child) {
        margin-top: var(--p-margin-top-tablet, 0);
    }

    p:not(:last-child),
    ul:not(:last-child),
    ol:not(:last-child),
    dl:not(:last-child),
    table:not(:last-child) {
        margin-bottom: var(--p-margin-bottom-tablet, 16px);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {

    p:not(:first-child),
    ul:not(:first-child),
    ol:not(:first-child),
    dl:not(:first-child),
    table:not(:first-child) {
        margin-top: var(--p-margin-top-desktop, 0);
    }

    p:not(:last-child),
    ul:not(:last-child),
    ol:not(:last-child),
    dl:not(:last-child),
    table:not(:last-child) {
        margin-bottom: var(--p-margin-bottom-desktop, 16px);
    }
}

@media screen and (min-width: 1440px) {

    p:not(:first-child),
    ul:not(:first-child),
    ol:not(:first-child),
    dl:not(:first-child),
    table:not(:first-child) {
        margin-top: var(--p-margin-top-wide, 0);
    }

    p:not(:last-child),
    ul:not(:last-child),
    ol:not(:last-child),
    dl:not(:last-child),
    table:not(:last-child) {
        margin-bottom: var(--p-margin-bottom-wide, 16px);
    }
}

@media screen and (min-width: 768px) {

    .apply-margins + p,
    .apply-margins + ul,
    .apply-margins + ol,
    .apply-margins + dl,
    .apply-margins + table {
        margin-top: var(--default-margin-top, inherit) !important;
    }
}

@media screen and (max-width: 767px) {

    .apply-margins + p,
    .apply-margins + ul,
    .apply-margins + ol,
    .apply-margins + dl,
    .apply-margins + table {
        margin-top: var(--default-margin-top, inherit) !important;
    }
}

@media screen and (max-width: 767px) {

    .layout--badge-set:not(:first-child),
    .layout--badge-set + h1,
    .layout--badge-set + h2,
    .layout--badge-set + h3,
    .layout--badge-set + h4 {
        margin-top: var(--badge-set-margin-top-mobile, 12px);
    }

    .layout--badge-set:not(:last-child) {
        margin-bottom: var(--badge-set-margin-bottom-mobile, 12px);
    }
}

@media screen and (min-width: 768px) {

    .layout--badge-set:not(:first-child),
    .layout--badge-set + h1,
    .layout--badge-set + h2,
    .layout--badge-set + h3,
    .layout--badge-set + h4 {
        margin-top: var(--badge-set-margin-top-desktop, 12px);
    }

    .layout--badge-set:not(:last-child) {
        margin-bottom: var(--badge-set-margin-bottom-desktop, 12px);
    }
}

.reset-margins,
.reset-margins > * {
    margin: 0;
}

.background-layer + * {
    margin-top: 0;
}

.padding-top-none {
    padding-top: 0;
}

@media screen and (max-width: 767px) {
    .padding-top-xxs {
        padding-top: var(--padding-xxs-mobile, 4px);
    }
}

@media screen and (min-width: 768px) {
    .padding-top-xxs {
        padding-top: var(--padding-xxs-desktop, 8px);
    }
}

@media screen and (max-width: 767px) {
    .padding-top-xs {
        padding-top: var(--padding-xs-mobile, 8px);
    }
}

@media screen and (min-width: 768px) {
    .padding-top-xs {
        padding-top: var(--padding-xs-desktop, 16px);
    }
}

@media screen and (max-width: 767px) {
    .padding-top-sm {
        padding-top: var(--padding-sm-mobile, 12px);
    }
}

@media screen and (min-width: 768px) {
    .padding-top-sm {
        padding-top: var(--padding-sm-desktop, 24px);
    }
}

@media screen and (max-width: 767px) {
    .padding-top-md {
        padding-top: var(--padding-md-mobile, 16px);
    }
}

@media screen and (min-width: 768px) {
    .padding-top-md {
        padding-top: var(--padding-md-desktop, 32px);
    }
}

@media screen and (max-width: 767px) {
    .padding-top-lg {
        padding-top: var(--padding-lg-mobile, 20px);
    }
}

@media screen and (min-width: 768px) {
    .padding-top-lg {
        padding-top: var(--padding-lg-desktop, 40px);
    }
}

@media screen and (max-width: 767px) {
    .padding-top-xl {
        padding-top: var(--padding-xl-mobile, 24px);
    }
}

@media screen and (min-width: 768px) {
    .padding-top-xl {
        padding-top: var(--padding-xl-desktop, 48px);
    }
}

@media screen and (max-width: 767px) {
    .padding-top-xxl {
        padding-top: var(--padding-xxl-mobile, 32px);
    }
}

@media screen and (min-width: 768px) {
    .padding-top-xxl {
        padding-top: var(--padding-xxl-desktop, 64px);
    }
}

.padding-bottom-none {
    padding-bottom: 0;
}

@media screen and (max-width: 767px) {
    .padding-bottom-xxs {
        padding-bottom: var(--padding-xxs-mobile, 4px);
    }
}

@media screen and (min-width: 768px) {
    .padding-bottom-xxs {
        padding-bottom: var(--padding-xxs-desktop, 8px);
    }
}

@media screen and (max-width: 767px) {
    .padding-bottom-xs {
        padding-bottom: var(--padding-xs-mobile, 8px);
    }
}

@media screen and (min-width: 768px) {
    .padding-bottom-xs {
        padding-bottom: var(--padding-xs-desktop, 16px);
    }
}

@media screen and (max-width: 767px) {
    .padding-bottom-sm {
        padding-bottom: var(--padding-sm-mobile, 12px);
    }
}

@media screen and (min-width: 768px) {
    .padding-bottom-sm {
        padding-bottom: var(--padding-sm-desktop, 24px);
    }
}

@media screen and (max-width: 767px) {
    .padding-bottom-md {
        padding-bottom: var(--padding-md-mobile, 16px);
    }
}

@media screen and (min-width: 768px) {
    .padding-bottom-md {
        padding-bottom: var(--padding-md-desktop, 32px);
    }
}

@media screen and (max-width: 767px) {
    .padding-bottom-lg {
        padding-bottom: var(--padding-lg-mobile, 20px);
    }
}

@media screen and (min-width: 768px) {
    .padding-bottom-lg {
        padding-bottom: var(--padding-lg-desktop, 40px);
    }
}

@media screen and (max-width: 767px) {
    .padding-bottom-xl {
        padding-bottom: var(--padding-xl-mobile, 24px);
    }
}

@media screen and (min-width: 768px) {
    .padding-bottom-xl {
        padding-bottom: var(--padding-xl-desktop, 48px);
    }
}

@media screen and (max-width: 767px) {
    .padding-bottom-xxl {
        padding-bottom: var(--padding-xxl-mobile, 32px);
    }
}

@media screen and (min-width: 768px) {
    .padding-bottom-xxl {
        padding-bottom: var(--padding-xxl-desktop, 64px);
    }
}

.padding-left-none {
    padding-left: 0;
}

@media screen and (max-width: 767px) {
    .padding-left-xxs {
        padding-left: var(--padding-xxs-mobile, 4px);
    }
}

@media screen and (min-width: 768px) {
    .padding-left-xxs {
        padding-left: var(--padding-xxs-desktop, 8px);
    }
}

@media screen and (max-width: 767px) {
    .padding-left-xs {
        padding-left: var(--padding-xs-mobile, 8px);
    }
}

@media screen and (min-width: 768px) {
    .padding-left-xs {
        padding-left: var(--padding-xs-desktop, 16px);
    }
}

@media screen and (max-width: 767px) {
    .padding-left-sm {
        padding-left: var(--padding-sm-mobile, 12px);
    }
}

@media screen and (min-width: 768px) {
    .padding-left-sm {
        padding-left: var(--padding-sm-desktop, 24px);
    }
}

@media screen and (max-width: 767px) {
    .padding-left-md {
        padding-left: var(--padding-md-mobile, 16px);
    }
}

@media screen and (min-width: 768px) {
    .padding-left-md {
        padding-left: var(--padding-md-desktop, 32px);
    }
}

@media screen and (max-width: 767px) {
    .padding-left-lg {
        padding-left: var(--padding-lg-mobile, 20px);
    }
}

@media screen and (min-width: 768px) {
    .padding-left-lg {
        padding-left: var(--padding-lg-desktop, 40px);
    }
}

@media screen and (max-width: 767px) {
    .padding-left-xl {
        padding-left: var(--padding-xl-mobile, 24px);
    }
}

@media screen and (min-width: 768px) {
    .padding-left-xl {
        padding-left: var(--padding-xl-desktop, 48px);
    }
}

@media screen and (max-width: 767px) {
    .padding-left-xxl {
        padding-left: var(--padding-xxl-mobile, 32px);
    }
}

@media screen and (min-width: 768px) {
    .padding-left-xxl {
        padding-left: var(--padding-xxl-desktop, 64px);
    }
}

.padding-right-none {
    padding-top: 0;
}

@media screen and (max-width: 767px) {
    .padding-right-xxs {
        padding-right: var(--padding-xxs-mobile, 4px);
    }
}

@media screen and (min-width: 768px) {
    .padding-right-xxs {
        padding-right: var(--padding-xxs-desktop, 8px);
    }
}

@media screen and (max-width: 767px) {
    .padding-right-xs {
        padding-right: var(--padding-xs-mobile, 8px);
    }
}

@media screen and (min-width: 768px) {
    .padding-right-xs {
        padding-right: var(--padding-xs-desktop, 16px);
    }
}

@media screen and (max-width: 767px) {
    .padding-right-sm {
        padding-right: var(--padding-sm-mobile, 12px);
    }
}

@media screen and (min-width: 768px) {
    .padding-right-sm {
        padding-right: var(--padding-sm-desktop, 24px);
    }
}

@media screen and (max-width: 767px) {
    .padding-right-md {
        padding-right: var(--padding-md-mobile, 16px);
    }
}

@media screen and (min-width: 768px) {
    .padding-right-md {
        padding-right: var(--padding-md-desktop, 32px);
    }
}

@media screen and (max-width: 767px) {
    .padding-right-lg {
        padding-right: var(--padding-lg-mobile, 20px);
    }
}

@media screen and (min-width: 768px) {
    .padding-right-lg {
        padding-right: var(--padding-lg-desktop, 40px);
    }
}

@media screen and (max-width: 767px) {
    .padding-right-xl {
        padding-right: var(--padding-xl-mobile, 24px);
    }
}

@media screen and (min-width: 768px) {
    .padding-right-xl {
        padding-right: var(--padding-xl-desktop, 48px);
    }
}

@media screen and (max-width: 767px) {
    .padding-right-xxl {
        padding-right: var(--padding-xxl-mobile, 32px);
    }
}

@media screen and (min-width: 768px) {
    .padding-right-xxl {
        padding-right: var(--padding-xxl-desktop, 64px);
    }
}

@media screen and (max-width: 767px) {
    .padding-inline-xxs {
        padding-inline: var(--padding-xxs-mobile, 4px);
    }
}

@media screen and (min-width: 768px) {
    .padding-inline-xxs {
        padding-inline: var(--padding-xxs-desktop, 8px);
    }
}

@media screen and (max-width: 767px) {
    .padding-inline-xs {
        padding-inline: var(--padding-xs-mobile, 8px);
    }
}

@media screen and (min-width: 768px) {
    .padding-inline-xs {
        padding-inline: var(--padding-xs-desktop, 16px);
    }
}

@media screen and (max-width: 767px) {
    .padding-inline-sm {
        padding-inline: var(--padding-sm-mobile, 12px);
    }
}

@media screen and (min-width: 768px) {
    .padding-inline-sm {
        padding-inline: var(--padding-sm-desktop, 24px);
    }
}

@media screen and (max-width: 767px) {
    .padding-inline-md {
        padding-inline: var(--padding-md-mobile, 16px);
    }
}

@media screen and (min-width: 768px) {
    .padding-inline-md {
        padding-inline: var(--padding-md-desktop, 32px);
    }
}

@media screen and (max-width: 767px) {
    .padding-inline-lg {
        padding-inline: var(--padding-lg-mobile, 20px);
    }
}

@media screen and (min-width: 768px) {
    .padding-inline-lg {
        padding-inline: var(--padding-lg-desktop, 40px);
    }
}

@media screen and (max-width: 767px) {
    .padding-inline-xl {
        padding-inline: var(--padding-xl-mobile, 24px);
    }
}

@media screen and (min-width: 768px) {
    .padding-inline-xl {
        padding-inline: var(--padding-xl-desktop, 48px);
    }
}

@media screen and (max-width: 767px) {
    .padding-inline-xxl {
        padding-inline: var(--padding-xxl-mobile, 32px);
    }
}

@media screen and (min-width: 768px) {
    .padding-inline-xxl {
        padding-inline: var(--padding-xxl-desktop, 64px);
    }
}

@media screen and (max-width: 767px) {
    .padding-block-xxs {
        padding-block: var(--padding-xxs-mobile, 4px);
    }
}

@media screen and (min-width: 768px) {
    .padding-block-xxs {
        padding-block: var(--padding-xxs-desktop, 8px);
    }
}

@media screen and (max-width: 767px) {
    .padding-block-xs {
        padding-block: var(--padding-xs-mobile, 8px);
    }
}

@media screen and (min-width: 768px) {
    .padding-block-xs {
        padding-block: var(--padding-xs-desktop, 16px);
    }
}

@media screen and (max-width: 767px) {
    .padding-block-sm {
        padding-block: var(--padding-sm-mobile, 12px);
    }
}

@media screen and (min-width: 768px) {
    .padding-block-sm {
        padding-block: var(--padding-sm-desktop, 24px);
    }
}

@media screen and (max-width: 767px) {
    .padding-block-md {
        padding-block: var(--padding-md-mobile, 16px);
    }
}

@media screen and (min-width: 768px) {
    .padding-block-md {
        padding-block: var(--padding-md-desktop, 32px);
    }
}

@media screen and (max-width: 767px) {
    .padding-block-lg {
        padding-block: var(--padding-lg-mobile, 20px);
    }
}

@media screen and (min-width: 768px) {
    .padding-block-lg {
        padding-block: var(--padding-lg-desktop, 40px);
    }
}

@media screen and (max-width: 767px) {
    .padding-block-xl {
        padding-block: var(--padding-xl-mobile, 24px);
    }
}

@media screen and (min-width: 768px) {
    .padding-block-xl {
        padding-block: var(--padding-xl-desktop, 48px);
    }
}

@media screen and (max-width: 767px) {
    .padding-block-xxl {
        padding-block: var(--padding-xxl-mobile, 32px);
    }
}

@media screen and (min-width: 768px) {
    .padding-block-xxl {
        padding-block: var(--padding-xxl-desktop, 64px);
    }
}

@media screen and (max-width: 767px) {
    .padding-xxs {
        padding: var(--padding-xxs-mobile, 4px);
    }
}

@media screen and (min-width: 768px) {
    .padding-xxs {
        padding: var(--padding-xxs-desktop, 8px);
    }
}

@media screen and (max-width: 767px) {
    .padding-xs {
        padding: var(--padding-xs-mobile, 8px);
    }
}

@media screen and (min-width: 768px) {
    .padding-xs {
        padding: var(--padding-xs-desktop, 16px);
    }
}

@media screen and (max-width: 767px) {
    .padding-sm {
        padding: var(--padding-sm-mobile, 12px);
    }
}

@media screen and (min-width: 768px) {
    .padding-sm {
        padding: var(--padding-sm-desktop, 24px);
    }
}

@media screen and (max-width: 767px) {
    .padding-md {
        padding: var(--padding-md-mobile, 16px);
    }
}

@media screen and (min-width: 768px) {
    .padding-md {
        padding: var(--padding-md-desktop, 32px);
    }
}

@media screen and (max-width: 767px) {
    .padding-lg {
        padding: var(--padding-lg-mobile, 20px);
    }
}

@media screen and (min-width: 768px) {
    .padding-lg {
        padding: var(--padding-lg-desktop, 40px);
    }
}

@media screen and (max-width: 767px) {
    .padding-xl {
        padding: var(--padding-xl-mobile, 24px);
    }
}

@media screen and (min-width: 768px) {
    .padding-xl {
        padding: var(--padding-xl-desktop, 48px);
    }
}

@media screen and (max-width: 767px) {
    .padding-xxl {
        padding: var(--padding-xxl-mobile, 32px);
    }
}

@media screen and (min-width: 768px) {
    .padding-xxl {
        padding: var(--padding-xxl-desktop, 64px);
    }
}

.margin-top-none {
    margin-top: 0 !important;
}

.margin-top-xxs {
    margin-top: var(--spacing-2x-small);
}

.margin-top-xs {
    margin-top: var(--spacing-x-small);
}

.margin-top-sm {
    margin-top: var(--spacing-small);
}

.margin-top-md {
    margin-top: var(--spacing-medium);
}

.margin-top-lg {
    margin-top: var(--spacing-large);
}

.margin-top-xl {
    margin-top: var(--spacing-x-large);
}

.margin-top-2xl {
    margin-top: var(--spacing-2x-large);
}

.margin-top-3xl {
    margin-top: var(--spacing-3x-large);
}

.margin-top-4xl {
    margin-top: var(--spacing-4x-large);
}

.margin-bottom-none {
    margin-bottom: 0 !important;
}

.margin-bottom-xxs {
    margin-bottom: var(--spacing-2x-small);
}

.margin-bottom-xs {
    margin-bottom: var(--spacing-x-small);
}

.margin-bottom-sm {
    margin-bottom: var(--spacing-small);
}

.margin-bottom-md {
    margin-bottom: var(--spacing-medium);
}

.margin-bottom-lg {
    margin-bottom: var(--spacing-large);
}

.margin-bottom-xl {
    margin-bottom: var(--spacing-x-large);
}

.margin-bottom-2xl {
    margin-bottom: var(--spacing-2x-large);
}

.margin-bottom-3xl {
    margin-bottom: var(--spacing-3x-large);
}

.margin-bottom-4xl {
    margin-bottom: var(--spacing-4x-large);
}

.margin-left-none {
    margin-left: 0 !important;
}

.margin-left-xxs {
    margin-left: var(--spacing-2x-small);
}

.margin-left-xs {
    margin-left: var(--spacing-x-small);
}

.margin-left-sm {
    margin-left: var(--spacing-small);
}

.margin-left-md {
    margin-left: var(--spacing-medium);
}

.margin-left-lg {
    margin-left: var(--spacing-large);
}

.margin-left-xl {
    margin-left: var(--spacing-x-large);
}

.margin-left-2xl {
    margin-left: var(--spacing-2x-large);
}

.margin-left-3xl {
    margin-left: var(--spacing-3x-large);
}

.margin-left-4xl {
    margin-left: var(--spacing-4x-large);
}

.margin-right-none {
    margin-right: 0 !important;
}

.margin-right-xxs {
    margin-right: var(--spacing-2x-small);
}

.margin-right-xs {
    margin-right: var(--spacing-x-small);
}

.margin-right-sm {
    margin-right: var(--spacing-small);
}

.margin-right-md {
    margin-right: var(--spacing-medium);
}

.margin-right-lg {
    margin-right: var(--spacing-large);
}

.margin-right-xl {
    margin-right: var(--spacing-x-large);
}

.margin-right-2xl {
    margin-right: var(--spacing-2x-large);
}

.margin-right-3xl {
    margin-right: var(--spacing-3x-large);
}

.margin-right-4xl {
    margin-right: var(--spacing-4x-large);
}

.row-gap-3x-small {
    --row-gap: var(--spacing-3x-small);
}

.row-gap-2x-small {
    --row-gap: var(--spacing-2x-small);
}

.row-gap-x-small {
    --row-gap: var(--spacing-x-small);
}

.row-gap-small {
    --row-gap: var(--spacing-small);
}

.row-gap-medium {
    --row-gap: var(--spacing-medium);
}

.row-gap-large {
    --row-gap: var(--spacing-large);
}

.row-gap-x-large {
    --row-gap: var(--spacing-x-large);
}

.row-gap-2x-large {
    --row-gap: var(--spacing-2x-large);
}

.row-gap-3x-large {
    --row-gap: var(--spacing-3x-large);
}

.row-gap-4x-large {
    --row-gap: var(--spacing-4x-large);
}

.column-gap-3x-small {
    --column-gap: var(--spacing-3x-small);
}

.column-gap-2x-small {
    --column-gap: var(--spacing-2x-small);
}

.column-gap-x-small {
    --column-gap: var(--spacing-x-small);
}

.column-gap-small {
    --column-gap: var(--spacing-small);
}

.column-gap-medium {
    --column-gap: var(--spacing-medium);
}

.column-gap-large {
    --column-gap: var(--spacing-large);
}

.column-gap-x-large {
    --column-gap: var(--spacing-x-large);
}

.column-gap-2x-large {
    --column-gap: var(--spacing-2x-large);
}

.column-gap-3x-large {
    --column-gap: var(--spacing-3x-large);
}

.column-gap-4x-large {
    --column-gap: var(--spacing-4x-large);
}

.show-mobile,
.show-tablet,
.show-laptop,
.show-desktop {
    display: none !important;
}

@media (max-width: 767px) {
    .show-mobile {
        display: inherit !important;
    }
}

@media (min-width: 768px) and (max-width: 1079px) {
    .show-tablet {
        display: inherit !important;
    }
}

@media (min-width: 1080px) and (max-width: 1439px) {
    .show-laptop {
        display: inherit !important;
    }
}

@media (min-width: 1440px) {
    .show-desktop {
        display: inherit !important;
    }
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1079px) {
    .hide-tablet {
        display: none !important;
    }
}

@media (min-width: 1080px) and (max-width: 1439px) {
    .hide-laptop {
        display: none !important;
    }
}

@media (min-width: 1440px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Atoms */
.spacer {
    display: flow-root;
}

.scrollable-container {
    position: relative;
    width: 100%;
    max-width: 100%;
}

@media screen and (max-width: 767px) {
    .scrollable-container::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 24px;
        height: 100%;
        background: var(--scroll-fade, linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)));
        pointer-events: none;
        z-index: 10;
    }

    .scrollable-container > .scrollable-content {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
        /* Hide scrollbar for IE, Edge and Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .scrollable-container > .scrollable-content::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar for Chrome, Safari and Opera */
    }

    .scrollable-container > .scrollable-content > * {
        width: max-content;
    }

    .scrollable-container > .scrollable-content > .layout.columns,
    .scrollable-container > .scrollable-content > .layout.flexible {
        width: auto;
        display: flex;
        flex-wrap: nowrap;
        /* Hide scrollbar for Firefox */
        -ms-overflow-style: none;
        /* Hide scrollbar for Internet Explorer and Edge */
    }

    .scrollable-container > .scrollable-content > .layout.columns::-webkit-scrollbar,
    .scrollable-container > .scrollable-content > .layout.flexible::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar for Chrome, Safari, and Opera */
    }

    .scrollable-container > .scrollable-content > .layout.columns > *,
    .scrollable-container > .scrollable-content > .layout.flexible > * {
        flex: 0 0 auto;
        flex-basis: var(--layout-scrollable-col-size, 90%);
    }

    .scrollable-container > .scrollable-content > .layout.button-group {
        --flexible-direction: row;
        width: max-content;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        /* Hide scrollbar for Firefox */
        -ms-overflow-style: none;
        /* Hide scrollbar for Internet Explorer and Edge */
    }

    .scrollable-container > .scrollable-content > .layout.button-group::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar for Chrome, Safari, and Opera */
    }

    .scrollable-container > .scrollable-content > .layout.button-group > * {
        flex: 0 0 auto;
        flex-basis: var(--layout-scrollable-col-size, 90%);
        white-space: nowrap;
        flex-shrink: 1;
    }
}

picture {
    overflow: hidden;
    max-width: 100%;
    border-radius: var(--image-border-radius);
}

picture.circle {
    --image-border-radius: 9999px;
    --image-aspect-ratio: 1 / 1;
}

picture,
picture img {
    position: relative;
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    transition: all 0.35s;
    aspect-ratio: var(--image-aspect-ratio, auto);
    object-fit: cover;
}

picture.link:hover img {
    transform: var(--image-transform, scale(1.05));
}

picture > a.link {
    position: absolute;
    z-index: 99;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

picture .overlay {
    position: absolute;
    z-index: 10;
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--image-overlay-background, rgba(0, 0, 0, 0.5));
    color: var(--image-overlay-color, white);
}

picture .overlay span {
    display: flex;
    color: var(--image-overlay-color) !important;
    font-size: var(--image-overlay-size);
    font-weight: var(--image-overlay-font-weight, var(--font-weight-regular));
    line-height: var(--image-overlay-line-height, var(--line-height-x-large));
}

picture .overlay span svg {
    width: var(--image-overlay-size);
    height: var(--image-overlay-size);
    color: inherit !important;
}

picture .overlay span svg,
picture .overlay span svg > * {
    color: var(--image-overlay-color);
}

figure.picture {
    display: flex;
    flex-direction: var(--flex-direction, row);
    gap: var(--image-row-gap, 2em) var(--image-column-gap, 1em);
    align-items: flex-start;
}

figure.picture:not([class*=description-position--]) {
    --flex-direction: column;
}

figure.picture .picture__wrapper {
    display: flex;
    width: 100%;
    flex: 1 1 max-content;
    height: auto;
    place-items: center;
}

figure.picture .picture__wrapper picture {
    width: auto;
    height: auto;
}

figure.picture figcaption {
    align-self: var(--bottom-decription-align, center);
    flex: 1 0 var(--figcaption-width, inherit);
    width: var(--figcaption-width, inherit);
    max-width: 100%;
}

figure.picture.description-position--left {
    --flex-direction: row-reverse;
    --bottom-decription-align: start;
    --figcaption-width: 320px;
}

figure.picture.description-position--right {
    --flex-direction: row;
    --bottom-decription-align: start;
    --figcaption-width: 320px;
}

figure.picture.description-position--bottom-left {
    --flex-direction: column;
    --bottom-decription-align: start;
}

figure.picture.description-position--bottom-center {
    --flex-direction: column;
    --bottom-decription-align: center;
}

figure.picture.description-position--bottom-right {
    --flex-direction: column;
    --bottom-decription-align: end;
}

@media screen and (max-width: 767px) {
    figure.picture {
        --flex-direction: column !important;
        --figcaption-width: inherit !important;
    }
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    border-radius: var(--video-border-radius, inherit);
}

.video-embed {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    border-radius: var(--video-embed-border-radius, var(--image-border-radius, 0));
    overflow: hidden;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.box-button {
    --shadow: var(--button-box-shadow, none);
    --size: 40px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 150ms;
    outline: none;
    width: fit-content;
    min-height: var(--size);
    cursor: pointer;
    color: var(--foreground, inherit);
    background: var(--background, transparent);
    border: var(--border, none);
    border-radius: var(--border-radius, 0);
    box-shadow: var(--shadow, none);
    padding: var(--padding, 0);
}

.box-button span {
    font-family: var(--button-font-family, var(--font-family-sans));
    font-weight: var(--button-font-weight, var(--font-weight-regular));
    color: inherit;
}

.box-button > svg {
    color: var(--foreground);
}

.box-button.small {
    --border-radius: var(--button-small-border-radius);
    --size: var(--button-small-height);
    --padding: var(--button-small-padding, 10px 16px);
    gap: var(--button-small-gap, 4px);
}

.box-button.small svg {
    max-width: var(--button-small-icon-size, 20px);
    max-height: var(--button-small-icon-size, 20px);
}

.box-button.small span {
    font-size: var(--button-small-font-size, 14px);
    line-height: var(--button-small-line-height, 20px);
}

.box-button.medium {
    --border-radius: var(--button-medium-border-radius);
    --size: var(--button-medium-height);
    --padding: var(--button-medium-padding, 12px 20px);
    gap: var(--button-medium-gap, 4px);
}

.box-button.medium svg {
    max-width: var(--button-medium-icon-size, 20px);
    max-height: var(--button-medium-icon-size, 20px);
}

.box-button.medium span {
    font-size: var(--button-medium-font-size, 16px);
    line-height: var(--button-medium-line-height, 24px);
}

.box-button.large {
    --border-radius: var(--button-large-border-radius);
    --size: var(--button-large-height);
    --padding: var(--button-large-padding, 16px 28px);
    gap: var(--button-large-gap, 6px);
}

.box-button.large svg {
    max-width: var(--button-large-icon-size, 24px);
    max-height: var(--button-large-icon-size, 24px);
}

.box-button.large span {
    font-size: var(--button-large-font-size, 18px);
    line-height: var(--button-large-line-height, 28px);
}

.box-button.solid.brand {
    --background: var(--button-brand-solid-background, transparent);
    --foreground: var(--button-brand-solid-color, inherit);
    --border: var(--button-brand-solid-border, none);
    --shadow: var(--button-brand-solid-box-shadow, none);
}

.box-button.solid.brand:hover,
.box-button.solid.brand.active {
    --background: var(--button-brand-solid-background-hover, transparent);
    --foreground: var(--button-brand-solid-color-hover, inherit);
    --border: var(--button-brand-solid-border-hover, none);
    --shadow: var(--button-brand-solid-box-shadow-hover, none);
}

.box-button.solid.bw {
    --background: var(--button-bw-solid-background, transparent);
    --foreground: var(--button-bw-solid-color, inherit);
    --border: var(--button-bw-solid-border, none);
    --shadow: var(--button-bw-solid-box-shadow, none);
}

.box-button.solid.bw:hover,
.box-button.solid.bw.active {
    --background: var(--button-bw-solid-background-hover, transparent);
    --foreground: var(--button-bw-solid-color-hover, inherit);
    --border: var(--button-bw-solid-border-hover, none);
    --shadow: var(--button-bw-solid-box-shadow-hover, none);
}

.box-button.solid.inverse {
    --background: var(--button-inverse-solid-background, transparent);
    --foreground: var(--button-inverse-solid-color, inherit);
    --border: var(--button-inverse-solid-border, none);
    --shadow: var(--button-inverse-solid-box-shadow, none);
}

.box-button.solid.inverse:hover,
.box-button.solid.inverse.active {
    --background: var(--button-inverse-solid-background-hover, transparent);
    --foreground: var(--button-inverse-solid-color-hover, inherit);
    --border: var(--button-inverse-solid-border-hover, none);
    --shadow: var(--button-inverse-solid-box-shadow-hover, none);
}

.box-button.solid[disabled],
.box-button.solid[disabled]:hover,
.box-button.solid[aria-disabled=true],
.box-button.solid[aria-disabled=true]:hover,
.box-button.solid:disabled,
.box-button.solid:disabled:hover {
    --background: var(--button-disabled-solid-background, transparent);
    --foreground: var(--button-disabled-solid-color, inherit);
    --border: var(--button-disabled-solid-border, none);
    --shadow: var(--button-disabled-solid-box-shadow, none);
}

.box-button.outline.brand {
    --background: var(--button-brand-outline-background, transparent);
    --foreground: var(--button-brand-outline-color, inherit);
    --border: var(--button-brand-outline-border, none);
    --shadow: var(--button-brand-outline-box-shadow, none);
}

.box-button.outline.brand:hover,
.box-button.outline.brand.active {
    --background: var(--button-brand-outline-background-hover, transparent);
    --foreground: var(--button-brand-outline-color-hover, inherit);
    --border: var(--button-brand-outline-border-hover, none);
    --shadow: var(--button-brand-outline-box-shadow-hover, none);
}

.box-button.outline.bw {
    --background: var(--button-bw-outline-background, transparent);
    --foreground: var(--button-bw-outline-color, inherit);
    --border: var(--button-bw-outline-border, none);
    --shadow: var(--button-bw-outline-box-shadow, none);
}

.box-button.outline.bw:hover,
.box-button.outline.bw.active {
    --background: var(--button-bw-outline-background-hover, transparent);
    --foreground: var(--button-bw-outline-color-hover, inherit);
    --border: var(--button-bw-outline-border-hover, none);
    --shadow: var(--button-bw-outline-box-shadow-hover, none);
}

.box-button.outline.inverse {
    --background: var(--button-inverse-outline-background, transparent);
    --foreground: var(--button-inverse-outline-color, inherit);
    --border: var(--button-inverse-outline-border, none);
    --shadow: var(--button-inverse-outline-box-shadow, none);
}

.box-button.outline.inverse:hover,
.box-button.outline.inverse.active {
    --background: var(--button-inverse-outline-background-hover, transparent);
    --foreground: var(--button-inverse-outline-color-hover, inherit);
    --border: var(--button-inverse-outline-border-hover, none);
    --shadow: var(--button-inverse-outline-box-shadow-hover, none);
}

.box-button.outline[disabled],
.box-button.outline[disabled]:hover,
.box-button.outline[aria-disabled=true],
.box-button.outline[aria-disabled=true]:hover,
.box-button.outline:disabled,
.box-button.outline:disabled:hover {
    --background: var(--button-disabled-outline-background, transparent);
    --foreground: var(--button-disabled-outline-color, inherit);
    --border: var(--button-disabled-outline-border, none);
    --shadow: var(--button-disabled-outline-box-shadow, none);
}

.box-button.ghost.brand {
    --background: var(--button-brand-ghost-background, transparent);
    --foreground: var(--button-brand-ghost-color, inherit);
    --border: var(--button-brand-ghost-border, none);
    --shadow: var(--button-brand-ghost-box-shadow, none);
}

.box-button.ghost.brand:hover,
.box-button.ghost.brand.active {
    --background: var(--button-brand-ghost-background-hover, transparent);
    --foreground: var(--button-brand-ghost-color-hover, inherit);
    --border: var(--button-brand-ghost-border-hover, none);
    --shadow: var(--button-brand-ghost-box-shadow-hover, none);
}

.box-button.ghost.bw {
    --background: var(--button-bw-ghost-background, transparent);
    --foreground: var(--button-bw-ghost-color, inherit);
    --border: var(--button-bw-ghost-border, none);
    --shadow: var(--button-bw-ghost-box-shadow, none);
}

.box-button.ghost.bw:hover,
.box-button.ghost.bw.active {
    --background: var(--button-bw-ghost-background-hover, transparent);
    --foreground: var(--button-bw-ghost-color-hover, inherit);
    --border: var(--button-bw-ghost-border-hover, none);
    --shadow: var(--button-bw-ghost-box-shadow-hover, none);
}

.box-button.ghost.inverse {
    --background: var(--button-inverse-ghost-background, transparent);
    --foreground: var(--button-inverse-ghost-color, inherit);
    --border: var(--button-inverse-ghost-border, none);
    --shadow: var(--button-inverse-ghost-box-shadow, none);
}

.box-button.ghost.inverse:hover,
.box-button.ghost.inverse.active {
    --background: var(--button-inverse-ghost-background-hover, transparent);
    --foreground: var(--button-inverse-ghost-color-hover, inherit);
    --border: var(--button-inverse-ghost-border-hover, none);
    --shadow: var(--button-inverse-ghost-box-shadow-hover, none);
}

.box-button.ghost[disabled],
.box-button.ghost[disabled]:hover,
.box-button.ghost[aria-disabled=true],
.box-button.ghost[aria-disabled=true]:hover,
.box-button.ghost:disabled,
.box-button.ghost:disabled:hover {
    --background: var(--button-disabled-ghost-background, transparent);
    --foreground: var(--button-disabled-ghost-color, inherit);
    --border: var(--button-disabled-ghost-border, none);
    --shadow: var(--button-disabled-ghost-box-shadow, none);
}

.box-button.extra.brand {
    --background: var(--button-brand-extra-background, transparent);
    --foreground: var(--button-brand-extra-color, inherit);
    --border: var(--button-brand-extra-border, none);
    --shadow: var(--button-brand-extra-box-shadow, none);
    --button-small-border-radius: var(--button-small-brand-extra-border-radius, inherit);
    --button-small-height: var(--button-small-brand-extra-height, inherit);
    --button-small-padding: var(--button-small-brand-extra-padding, inherit);
    --button-small-gap: var(--button-small-brand-extra-gap, inherit);
    --button-small-icon-size: var(--button-small-brand-extra-icon-size, inherit);
    --button-small-font-size: var(--button-small-brand-extra-font-size, inherit);
    --button-small-line-height: var(--button-small-brand-extra-line-height, inherit);
    --button-medium-border-radius: var(--button-medium-brand-extra-border-radius, inherit);
    --button-medium-height: var(--button-medium-brand-extra-height, inherit);
    --button-medium-padding: var(--button-medium-brand-extra-padding, inherit);
    --button-medium-gap: var(--button-medium-brand-extra-gap, inherit);
    --button-medium-icon-size: var(--button-medium-brand-extra-icon-size, inherit);
    --button-medium-font-size: var(--button-medium-brand-extra-font-size, inherit);
    --button-medium-line-height: var(--button-medium-brand-extra-line-height, inherit);
    --button-large-border-radius: var(--button-large-brand-extra-border-radius, inherit);
    --button-large-height: var(--button-large-brand-extra-height, inherit);
    --button-large-padding: var(--button-large-brand-extra-padding, inherit);
    --button-large-gap: var(--button-large-brand-extra-gap, inherit);
    --button-large-icon-size: var(--button-large-brand-extra-icon-size, inherit);
    --button-large-font-size: var(--button-large-brand-extra-font-size, inherit);
    --button-large-line-height: var(--button-large-brand-extra-line-height, inherit);
}

.box-button.extra.brand:hover,
.box-button.extra.brand.active,
.box-button.extra.brand:active {
    --background: var(--button-brand-extra-background-hover, transparent);
    --foreground: var(--button-brand-extra-color-hover, inherit);
    --border: var(--button-brand-extra-border-hover, none);
    --shadow: var(--button-brand-extra-box-shadow-hover, none);
    --button-small-border-radius: var(--button-small-brand-extra-border-radius-hover, inherit);
    --button-small-height: var(--button-small-brand-extra-height-hover, inherit);
    --button-small-padding: var(--button-small-brand-extra-padding-hover, inherit);
    --button-small-gap: var(--button-small-brand-extra-gap-hover, inherit);
    --button-small-icon-size: var(--button-small-brand-extra-icon-size-hover, inherit);
    --button-small-font-size: var(--button-small-brand-extra-font-size-hover, inherit);
    --button-small-line-height: var(--button-small-brand-extra-line-height-hover, inherit);
    --button-medium-border-radius: var(--button-medium-brand-extra-border-radius-hover, inherit);
    --button-medium-height: var(--button-medium-brand-extra-height-hover, inherit);
    --button-medium-padding: var(--button-medium-brand-extra-padding-hover, inherit);
    --button-medium-gap: var(--button-medium-brand-extra-gap-hover, inherit);
    --button-medium-icon-size: var(--button-medium-brand-extra-icon-size-hover, inherit);
    --button-medium-font-size: var(--button-medium-brand-extra-font-size-hover, inherit);
    --button-medium-line-height: var(--button-medium-brand-extra-line-height-hover, inherit);
    --button-large-border-radius: var(--button-large-brand-extra-border-radius-hover, inherit);
    --button-large-height: var(--button-large-brand-extra-height-hover, inherit);
    --button-large-padding: var(--button-large-brand-extra-padding-hover, inherit);
    --button-large-gap: var(--button-large-brand-extra-gap-hover, inherit);
    --button-large-icon-size: var(--button-large-brand-extra-icon-size-hover, inherit);
    --button-large-font-size: var(--button-large-brand-extra-font-size-hover, inherit);
    --button-large-line-height: var(--button-large-brand-extra-line-height-hover, inherit);
}

.box-button.extra.bw {
    --background: var(--button-bw-extra-background, transparent);
    --foreground: var(--button-bw-extra-color, inherit);
    --border: var(--button-bw-extra-border, none);
    --shadow: var(--button-bw-extra-box-shadow, none);
    --button-small-border-radius: var(--button-small-bw-extra-border-radius, inherit);
    --button-small-height: var(--button-small-bw-extra-height, inherit);
    --button-small-padding: var(--button-small-bw-extra-padding, inherit);
    --button-small-gap: var(--button-small-bw-extra-gap, inherit);
    --button-small-icon-size: var(--button-small-bw-extra-icon-size, inherit);
    --button-small-font-size: var(--button-small-bw-extra-font-size, inherit);
    --button-small-line-height: var(--button-small-bw-extra-line-height, inherit);
    --button-medium-border-radius: var(--button-medium-bw-extra-border-radius, inherit);
    --button-medium-height: var(--button-medium-bw-extra-height, inherit);
    --button-medium-padding: var(--button-medium-bw-extra-padding, inherit);
    --button-medium-gap: var(--button-medium-bw-extra-gap, inherit);
    --button-medium-icon-size: var(--button-medium-bw-extra-icon-size, inherit);
    --button-medium-font-size: var(--button-medium-bw-extra-font-size, inherit);
    --button-medium-line-height: var(--button-medium-bw-extra-line-height, inherit);
    --button-large-border-radius: var(--button-large-bw-extra-border-radius, inherit);
    --button-large-height: var(--button-large-bw-extra-height, inherit);
    --button-large-padding: var(--button-large-bw-extra-padding, inherit);
    --button-large-gap: var(--button-large-bw-extra-gap, inherit);
    --button-large-icon-size: var(--button-large-bw-extra-icon-size, inherit);
    --button-large-font-size: var(--button-large-bw-extra-font-size, inherit);
    --button-large-line-height: var(--button-large-bw-extra-line-height, inherit);
}

.box-button.extra.bw:hover,
.box-button.extra.bw.active,
.box-button.extra.bw:active {
    --background: var(--button-bw-extra-background-hover, transparent);
    --foreground: var(--button-bw-extra-color-hover, inherit);
    --border: var(--button-bw-extra-border-hover, none);
    --shadow: var(--button-bw-extra-box-shadow-hover, none);
    --button-small-border-radius: var(--button-small-bw-extra-border-radius-hover, inherit);
    --button-small-height: var(--button-small-bw-extra-height-hover, inherit);
    --button-small-padding: var(--button-small-bw-extra-padding-hover, inherit);
    --button-small-gap: var(--button-small-bw-extra-gap-hover, inherit);
    --button-small-icon-size: var(--button-small-bw-extra-icon-size-hover, inherit);
    --button-small-font-size: var(--button-small-bw-extra-font-size-hover, inherit);
    --button-small-line-height: var(--button-small-bw-extra-line-height-hover, inherit);
    --button-medium-border-radius: var(--button-medium-bw-extra-border-radius-hover, inherit);
    --button-medium-height: var(--button-medium-bw-extra-height-hover, inherit);
    --button-medium-padding: var(--button-medium-bw-extra-padding-hover, inherit);
    --button-medium-gap: var(--button-medium-bw-extra-gap-hover, inherit);
    --button-medium-icon-size: var(--button-medium-bw-extra-icon-size-hover, inherit);
    --button-medium-font-size: var(--button-medium-bw-extra-font-size-hover, inherit);
    --button-medium-line-height: var(--button-medium-bw-extra-line-height-hover, inherit);
    --button-large-border-radius: var(--button-large-bw-extra-border-radius-hover, inherit);
    --button-large-height: var(--button-large-bw-extra-height-hover, inherit);
    --button-large-padding: var(--button-large-bw-extra-padding-hover, inherit);
    --button-large-gap: var(--button-large-bw-extra-gap-hover, inherit);
    --button-large-icon-size: var(--button-large-bw-extra-icon-size-hover, inherit);
    --button-large-font-size: var(--button-large-bw-extra-font-size-hover, inherit);
    --button-large-line-height: var(--button-large-bw-extra-line-height-hover, inherit);
}

.box-button.extra.inverse {
    --background: var(--button-inverse-extra-background, transparent);
    --foreground: var(--button-inverse-extra-color, inherit);
    --border: var(--button-inverse-extra-border, none);
    --shadow: var(--button-inverse-extra-box-shadow, none);
    --button-small-border-radius: var(--button-small-inverse-extra-border-radius, inherit);
    --button-small-height: var(--button-small-inverse-extra-height, inherit);
    --button-small-padding: var(--button-small-inverse-extra-padding, inherit);
    --button-small-gap: var(--button-small-inverse-extra-gap, inherit);
    --button-small-icon-size: var(--button-small-inverse-extra-icon-size, inherit);
    --button-small-font-size: var(--button-small-inverse-extra-font-size, inherit);
    --button-small-line-height: var(--button-small-inverse-extra-line-height, inherit);
    --button-medium-border-radius: var(--button-medium-inverse-extra-border-radius, inherit);
    --button-medium-height: var(--button-medium-inverse-extra-height, inherit);
    --button-medium-padding: var(--button-medium-inverse-extra-padding, inherit);
    --button-medium-gap: var(--button-medium-inverse-extra-gap, inherit);
    --button-medium-icon-size: var(--button-medium-inverse-extra-icon-size, inherit);
    --button-medium-font-size: var(--button-medium-inverse-extra-font-size, inherit);
    --button-medium-line-height: var(--button-medium-inverse-extra-line-height, inherit);
    --button-large-border-radius: var(--button-large-inverse-extra-border-radius, inherit);
    --button-large-height: var(--button-large-inverse-extra-height, inherit);
    --button-large-padding: var(--button-large-inverse-extra-padding, inherit);
    --button-large-gap: var(--button-large-inverse-extra-gap, inherit);
    --button-large-icon-size: var(--button-large-inverse-extra-icon-size, inherit);
    --button-large-font-size: var(--button-large-inverse-extra-font-size, inherit);
    --button-large-line-height: var(--button-large-inverse-extra-line-height, inherit);
}

.box-button.extra.inverse:hover,
.box-button.extra.inverse.active,
.box-button.extra.inverse:active {
    --background: var(--button-inverse-extra-background-hover, transparent);
    --foreground: var(--button-inverse-extra-color-hover, inherit);
    --border: var(--button-inverse-extra-border-hover, none);
    --shadow: var(--button-inverse-extra-box-shadow-hover, none);
    --button-small-border-radius: var(--button-small-inverse-extra-border-radius-hover, inherit);
    --button-small-height: var(--button-small-inverse-extra-height-hover, inherit);
    --button-small-padding: var(--button-small-inverse-extra-padding-hover, inherit);
    --button-small-gap: var(--button-small-inverse-extra-gap-hover, inherit);
    --button-small-icon-size: var(--button-small-inverse-extra-icon-size-hover, inherit);
    --button-small-font-size: var(--button-small-inverse-extra-font-size-hover, inherit);
    --button-small-line-height: var(--button-small-inverse-extra-line-height-hover, inherit);
    --button-medium-border-radius: var(--button-medium-inverse-extra-border-radius-hover, inherit);
    --button-medium-height: var(--button-medium-inverse-extra-height-hover, inherit);
    --button-medium-padding: var(--button-medium-inverse-extra-padding-hover, inherit);
    --button-medium-gap: var(--button-medium-inverse-extra-gap-hover, inherit);
    --button-medium-icon-size: var(--button-medium-inverse-extra-icon-size-hover, inherit);
    --button-medium-font-size: var(--button-medium-inverse-extra-font-size-hover, inherit);
    --button-medium-line-height: var(--button-medium-inverse-extra-line-height-hover, inherit);
    --button-large-border-radius: var(--button-large-inverse-extra-border-radius-hover, inherit);
    --button-large-height: var(--button-large-inverse-extra-height-hover, inherit);
    --button-large-padding: var(--button-large-inverse-extra-padding-hover, inherit);
    --button-large-gap: var(--button-large-inverse-extra-gap-hover, inherit);
    --button-large-icon-size: var(--button-large-inverse-extra-icon-size-hover, inherit);
    --button-large-font-size: var(--button-large-inverse-extra-font-size-hover, inherit);
    --button-large-line-height: var(--button-large-inverse-extra-line-height-hover, inherit);
}

.box-button.extra[disabled],
.box-button.extra[disabled]:hover,
.box-button.extra[aria-disabled=true],
.box-button.extra[aria-disabled=true]:hover,
.box-button.extra:disabled,
.box-button.extra:disabled:hover {
    --background: var(--button-disabled-extra-background, transparent);
    --foreground: var(--button-disabled-extra-color, inherit);
    --border: var(--button-disabled-extra-border, none);
    --shadow: var(--button-disabled-extra-box-shadow, none);
}

.box-button:focus-visible {
    box-shadow: var(--focus-ring-shadow) !important;
}

.box-button[disabled],
.box-button[aria-disabled=true],
.box-button:disabled {
    cursor: not-allowed;
}

.icon-button {
    --shadow: var(--button-box-shadow, none);
    --size: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 150ms;
    outline: none;
    width: var(--size);
    height: var(--size);
    cursor: pointer;
    color: var(--foreground, inherit);
    background: var(--background, transparent);
    border: var(--border, none);
    border-radius: var(--border-radius, 0);
    box-shadow: var(--shadow, none);
}

.icon-button span {
    display: flex;
    color: var(--foreground);
    width: var(--icon-size);
    height: var(--icon-size);
}

.icon-button span svg {
    color: var(--foreground);
    width: var(--icon-size);
    height: var(--icon-size);
}

.icon-button.solid.brand {
    --background: var(--button-brand-solid-background, transparent);
    --foreground: var(--button-brand-solid-color, inherit);
    --border: var(--button-brand-solid-border, none);
    --shadow: var(--button-brand-solid-box-shadow, none);
}

.icon-button.solid.brand:hover,
.icon-button.solid.brand.active {
    --background: var(--button-brand-solid-background-hover, transparent);
    --foreground: var(--button-brand-solid-color-hover, inherit);
    --border: var(--button-brand-solid-border-hover, none);
    --shadow: var(--button-brand-solid-box-shadow-hover, none);
}

.icon-button.solid.bw {
    --background: var(--button-bw-solid-background, transparent);
    --foreground: var(--button-bw-solid-color, inherit);
    --border: var(--button-bw-solid-border, none);
    --shadow: var(--button-bw-solid-box-shadow, none);
}

.icon-button.solid.bw:hover,
.icon-button.solid.bw.active {
    --background: var(--button-bw-solid-background-hover, transparent);
    --foreground: var(--button-bw-solid-color-hover, inherit);
    --border: var(--button-bw-solid-border-hover, none);
    --shadow: var(--button-bw-solid-box-shadow-hover, none);
}

.icon-button.solid.inverse {
    --background: var(--button-inverse-solid-background, transparent);
    --foreground: var(--button-inverse-solid-color, inherit);
    --border: var(--button-inverse-solid-border, none);
    --shadow: var(--button-inverse-solid-box-shadow, none);
}

.icon-button.solid.inverse:hover,
.icon-button.solid.inverse.active {
    --background: var(--button-inverse-solid-background-hover, transparent);
    --foreground: var(--button-inverse-solid-color-hover, inherit);
    --border: var(--button-inverse-solid-border-hover, none);
    --shadow: var(--button-inverse-solid-box-shadow-hover, none);
}

.icon-button.solid[disabled],
.icon-button.solid[disabled]:hover,
.icon-button.solid[aria-disabled=true],
.icon-button.solid[aria-disabled=true]:hover,
.icon-button.solid:disabled,
.icon-button.solid:disabled:hover {
    --background: var(--button-disabled-solid-background, transparent);
    --foreground: var(--button-disabled-solid-color, inherit);
    --border: var(--button-disabled-solid-border, none);
    --shadow: var(--button-disabled-solid-box-shadow, none);
}

.icon-button.outline.brand {
    --background: var(--button-brand-outline-background, transparent);
    --foreground: var(--button-brand-outline-color, inherit);
    --border: var(--button-brand-outline-border, none);
    --shadow: var(--button-brand-outline-box-shadow, none);
}

.icon-button.outline.brand:hover,
.icon-button.outline.brand.active {
    --background: var(--button-brand-outline-background-hover, transparent);
    --foreground: var(--button-brand-outline-color-hover, inherit);
    --border: var(--button-brand-outline-border-hover, none);
    --shadow: var(--button-brand-outline-box-shadow-hover, none);
}

.icon-button.outline.bw {
    --background: var(--button-bw-outline-background, transparent);
    --foreground: var(--button-bw-outline-color, inherit);
    --border: var(--button-bw-outline-border, none);
    --shadow: var(--button-bw-outline-box-shadow, none);
}

.icon-button.outline.bw:hover,
.icon-button.outline.bw.active {
    --background: var(--button-bw-outline-background-hover, transparent);
    --foreground: var(--button-bw-outline-color-hover, inherit);
    --border: var(--button-bw-outline-border-hover, none);
    --shadow: var(--button-bw-outline-box-shadow-hover, none);
}

.icon-button.outline.inverse {
    --background: var(--button-inverse-outline-background, transparent);
    --foreground: var(--button-inverse-outline-color, inherit);
    --border: var(--button-inverse-outline-border, none);
    --shadow: var(--button-inverse-outline-box-shadow, none);
}

.icon-button.outline.inverse:hover,
.icon-button.outline.inverse.active {
    --background: var(--button-inverse-outline-background-hover, transparent);
    --foreground: var(--button-inverse-outline-color-hover, inherit);
    --border: var(--button-inverse-outline-border-hover, none);
    --shadow: var(--button-inverse-outline-box-shadow-hover, none);
}

.icon-button.outline[disabled],
.icon-button.outline[disabled]:hover,
.icon-button.outline[aria-disabled=true],
.icon-button.outline[aria-disabled=true]:hover,
.icon-button.outline:disabled,
.icon-button.outline:disabled:hover {
    --background: var(--button-disabled-outline-background, transparent);
    --foreground: var(--button-disabled-outline-color, inherit);
    --border: var(--button-disabled-outline-border, none);
    --shadow: var(--button-disabled-outline-box-shadow, none);
}

.icon-button.ghost.brand {
    --background: var(--button-brand-ghost-background, transparent);
    --foreground: var(--button-brand-ghost-color, inherit);
    --border: var(--button-brand-ghost-border, none);
    --shadow: var(--button-brand-ghost-box-shadow, none);
}

.icon-button.ghost.brand:hover,
.icon-button.ghost.brand.active {
    --background: var(--button-brand-ghost-background-hover, transparent);
    --foreground: var(--button-brand-ghost-color-hover, inherit);
    --border: var(--button-brand-ghost-border-hover, none);
    --shadow: var(--button-brand-ghost-box-shadow-hover, none);
}

.icon-button.ghost.bw {
    --background: var(--button-bw-ghost-background, transparent);
    --foreground: var(--button-bw-ghost-color, inherit);
    --border: var(--button-bw-ghost-border, none);
    --shadow: var(--button-bw-ghost-box-shadow, none);
}

.icon-button.ghost.bw:hover,
.icon-button.ghost.bw.active {
    --background: var(--button-bw-ghost-background-hover, transparent);
    --foreground: var(--button-bw-ghost-color-hover, inherit);
    --border: var(--button-bw-ghost-border-hover, none);
    --shadow: var(--button-bw-ghost-box-shadow-hover, none);
}

.icon-button.ghost.inverse {
    --background: var(--button-inverse-ghost-background, transparent);
    --foreground: var(--button-inverse-ghost-color, inherit);
    --border: var(--button-inverse-ghost-border, none);
    --shadow: var(--button-inverse-ghost-box-shadow, none);
}

.icon-button.ghost.inverse:hover,
.icon-button.ghost.inverse.active {
    --background: var(--button-inverse-ghost-background-hover, transparent);
    --foreground: var(--button-inverse-ghost-color-hover, inherit);
    --border: var(--button-inverse-ghost-border-hover, none);
    --shadow: var(--button-inverse-ghost-box-shadow-hover, none);
}

.icon-button.ghost[disabled],
.icon-button.ghost[disabled]:hover,
.icon-button.ghost[aria-disabled=true],
.icon-button.ghost[aria-disabled=true]:hover,
.icon-button.ghost:disabled,
.icon-button.ghost:disabled:hover {
    --background: var(--button-disabled-ghost-background, transparent);
    --foreground: var(--button-disabled-ghost-color, inherit);
    --border: var(--button-disabled-ghost-border, none);
    --shadow: var(--button-disabled-ghost-box-shadow, none);
}

.icon-button.small {
    --border-radius: var(--button-small-border-radius);
    --size: var(--button-small-height);
}

.icon-button.small svg {
    --icon-size: var(--button-small-icon-size, 20px);
}

.icon-button.medium {
    --border-radius: var(--button-medium-border-radius);
    --size: var(--button-medium-height);
}

.icon-button.medium svg {
    --icon-size: var(--button-medium-icon-size, 20px);
}

.icon-button.large {
    --border-radius: var(--button-large-border-radius);
    --size: var(--button-large-height);
}

.icon-button.large svg {
    --icon-size: var(--button-large-icon-size, 24px);
}

.icon-button:focus-visible {
    box-shadow: var(--focus-ring-shadow) !important;
}

.icon-button[disabled],
.icon-button[aria-disabled=true],
.icon-button:disabled {
    cursor: not-allowed;
}

a:not(.box-button, .link-button, .icon-button, .logo, .tab, .link-area, .block-preview-edit) {
    --foreground: inherit;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap, var(--link-gap, 4px));
    width: fit-content;
    color: var(--foreground);
    border: var(--border, none);
    box-shadow: var(--shadow, none);
    border-radius: var(--border-radius, 0);
    transition: all 0.3s;
    padding: var(--padding, 0);
    font-family: var(--link-font-family, inherit);
    font-weight: var(--link-font-weight, inherit);
    font-size: var(--link-font-size, inherit);
    line-height: var(--link-line-height, inherit);
    text-decoration: var(--link-decoration, inherit);
    text-underline-offset: 0.3em;
    vertical-align: baseline;
}

a:not(.box-button, .link-button, .icon-button, .logo, .tab, .link-area, .block-preview-edit) svg {
    color: inherit;
    height: 1em;
    width: 1em;
}

a:not(.box-button, .link-button, .icon-button, .logo, .tab, .link-area, .block-preview-edit).foreground--brand {
    --foreground: var(--link-brand-foreground, inherit);
    --background: var(--link-brand-background, transparent);
    --border: var(--link-brand-border, none);
    --shadow: var(--link-brand-box-shadow, none);
    --border-radius: var(--link-brand-border-radius, 0);
    --padding: var(--link-brand-padding, 0);
    --link-decoration: var(--link-brand-decoration, inherit);
}

a:not(.box-button, .link-button, .icon-button, .logo, .tab, .link-area, .block-preview-edit).foreground--brand:hover {
    --foreground: var(--link-brand-foreground-hover, inherit);
    --background: var(--link-brand-background-hover, transparent);
    --border: var(--link-brand-border-hover, none);
    --shadow: var(--link-brand-box-shadow-hover, none);
    --border-radius: var(--link-brand-border-radius-hover, 0);
    --padding: var(--link-brand-padding-hover, 0);
    --link-decoration: var(--link-brand-decoration-hover, inherit);
}

a:not(.box-button, .link-button, .icon-button, .logo, .tab, .link-area, .block-preview-edit).foreground--bw {
    --foreground: var(--link-bw-foreground, inherit);
    --background: var(--link-bw-background, transparent);
    --border: var(--link-bw-border, none);
    --shadow: var(--link-bw-box-shadow, none);
    --border-radius: var(--link-bw-border-radius, 0);
    --padding: var(--link-bw-padding, 0);
    --link-decoration: var(--link-bw-decoration, inherit);
}

a:not(.box-button, .link-button, .icon-button, .logo, .tab, .link-area, .block-preview-edit).foreground--bw:hover {
    --foreground: var(--link-bw-foreground-hover, inherit);
    --background: var(--link-bw-background-hover, transparent);
    --border: var(--link-bw-border-hover, none);
    --shadow: var(--link-bw-box-shadow-hover, none);
    --border-radius: var(--link-bw-border-radius-hover, 0);
    --padding: var(--link-bw-padding-hover, 0);
    --link-decoration: var(--link-bw-decoration-hover, inherit);
}

a:not(.box-button, .link-button, .icon-button, .logo, .tab, .link-area, .block-preview-edit).foreground--inverse {
    --foreground: var(--link-inverse-foreground, inherit);
    --background: var(--link-inverse-background, transparent);
    --border: var(--link-inverse-border, none);
    --shadow: var(--link-inverse-box-shadow, none);
    --border-radius: var(--link-inverse-border-radius, 0);
    --padding: var(--link-inverse-padding, 0);
    --link-decoration: var(--link-inverse-decoration, inherit);
}

a:not(.box-button, .link-button, .icon-button, .logo, .tab, .link-area, .block-preview-edit).foreground--inverse:hover {
    --foreground: var(--link-inverse-foreground-hover, inherit);
    --background: var(--link-inverse-background-hover, transparent);
    --border: var(--link-inverse-border-hover, none);
    --shadow: var(--link-inverse-box-shadow-hover, none);
    --border-radius: var(--link-inverse-border-radius-hover, 0);
    --padding: var(--link-inverse-padding-hover, 0);
    --link-decoration: var(--link-inverse-decoration-hover, inherit);
}

a:not(.box-button, .link-button, .icon-button, .logo, .tab, .link-area, .block-preview-edit).foreground--inherit {
    --foreground: inherit;
}

a:not(.box-button, .link-button, .icon-button, .logo, .tab, .link-area, .block-preview-edit).foreground--inherit:hover {
    --foreground: inherit;
}

a:not(.box-button, .link-button, .icon-button, .logo, .link, .tab) {
    transition: all 0.3s;
    --foreground: var(--link-default-foreground, inherit);
    --background: var(--link-default-background, transparent);
    --border: var(--link-default-border, none);
    --shadow: var(--link-default-box-shadow, none);
    --border-radius: var(--link-default-border-radius, 0);
    --padding: var(--link-default-padding, 0);
    --link-decoration: var(--link-default-decoration, inherit);
}

a:not(.box-button, .link-button, .icon-button, .logo, .link, .tab):hover {
    --foreground: var(--link-default-foreground-hover, inherit);
    --background: var(--link-default-background-hover, transparent);
    --border: var(--link-default-border-hover, none);
    --shadow: var(--link-default-box-shadow-hover, none);
    --border-radius: var(--link-default-border-radius-hover, 0);
    --padding: var(--link-default-padding-hover, 0);
    --link-decoration: var(--link-default-decoration-hover, inherit);
}

a.link.logo {
    line-height: 0rem;
}

.link-button {
    --shadow: var(--button-box-shadow, none);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 150ms;
    outline: none;
    width: fit-content;
    cursor: pointer;
    color: var(--foreground, inherit);
    border-radius: var(--border-radius, 0);
    box-shadow: var(--shadow, none);
}

.link-button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    font-family: var(--button-font-family, var(--font-family-sans));
    font-weight: var(--button-font-weight, var(--font-weight-regular));
    color: inherit;
}

.link-button:not([disabled]):hover span {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.link-button > svg {
    color: inherit;
}

.link-button.brand {
    --foreground: var(--link-button-brand-color, var(--button-brand-ghost-color, inherit));
    --border: var(--link-button-brand-border, var(--button-brand-ghost-border, none));
    --shadow: var(--link-button-brand-box-shadow, var(--button-brand-ghost-box-shadow, none));
}

.link-button.brand:hover,
.link-button.brand.active {
    --foreground: var(--link-button-brand-color-hover, var(--button-brand-ghost-color-hover, inherit));
    --border: var(--link-button-brand-border-hover, var(--button-brand-ghost-border-hover, none));
    --shadow: var(--link-button-brand-box-shadow-hover, var(--button-brand-ghost-box-shadow-hover, none));
}

.link-button.bw {
    --foreground: var(--link-button-bw-color, var(--button-bw-ghost-color, inherit));
    --border: var(--link-button-bw-border, var(--button-bw-ghost-border, none));
    --shadow: var(--link-button-bw-box-shadow, var(--button-bw-ghost-box-shadow, none));
}

.link-button.bw:hover,
.link-button.bw.active {
    --foreground: var(--link-button-bw-color-hover, var(--button-bw-ghost-color-hover, inherit));
    --border: var(--link-button-bw-border-hover, var(--button-bw-ghost-border-hover, none));
    --shadow: var(--link-button-bw-box-shadow-hover, var(--button-bw-ghost-box-shadow-hover, none));
}

.link-button.inverse {
    --foreground: var(--link-button-inverse-color, var(--button-inverse-ghost-color, inherit));
    --border: var(--link-button-inverse-border, var(--button-inverse-ghost-border, none));
    --shadow: var(--link-button-inverse-box-shadow, var(--button-inverse-ghost-box-shadow, none));
}

.link-button.inverse:hover,
.link-button.inverse.active {
    --foreground: var(--link-button-inverse-color-hover, var(--button-inverse-ghost-color-hover, inherit));
    --border: var(--link-button-inverse-border-hover, var(--button-inverse-ghost-border-hover, none));
    --shadow: var(--link-button-inverse-box-shadow-hover, var(--button-inverse-ghost-box-shadow-hover, none));
}

.link-button[disabled],
.link-button[disabled]:hover,
.link-button[aria-disabled=true],
.link-button[aria-disabled=true]:hover,
.link-button:disabled,
.link-button:disabled:hover {
    --foreground: var(--button-disabled-ghost-color, inherit);
    --border: var(--button-disabled-ghost-border, none);
    --shadow: var(--button-disabled-ghost-box-shadow, none);
}

.link-button.small {
    --button-gap: var(--button-small-gap, 4px);
}

.link-button.small svg {
    width: var(--button-small-icon-size, 20px);
    height: var(--button-small-icon-size, 20px);
}

.link-button.small span {
    font-size: var(--button-small-font-size, 14px);
    line-height: var(--button-small-line-height, 20px);
}

.link-button.medium {
    --button-gap: var(--button-medium-gap, 4px);
}

.link-button.medium svg {
    width: var(--button-medium-icon-size, 20px);
    height: var(--button-medium-icon-size, 20px);
}

.link-button.medium span {
    font-size: var(--button-medium-font-size, 16px);
    line-height: var(--button-medium-line-height, 24px);
}

.link-button.large {
    --button-gap: var(--button-large-gap, 6px);
}

.link-button.large svg {
    width: var(--button-large-icon-size, 24px);
    height: var(--button-large-icon-size, 24px);
}

.link-button.large span {
    font-size: var(--button-large-font-size, 18px);
    line-height: var(--button-large-line-height, 28px);
}

.link-button:focus-visible {
    box-shadow: var(--focus-ring-shadow) !important;
}

.link-button[disabled],
.link-button[aria-disabled=true],
.link-button:disabled {
    cursor: not-allowed;
}

section {
    --border-color: var(--section-border-color, inherit);
    --border-width: var(--section-border-width, inherit);
    --border-style: var(--section-border-style, none);
    --border-radius: var(--section-border-radius, inherit);
    --shadow: var(--section-shadow, inherit);
    width: var(--section-width, 100%);
    background: var(--background, transparent);
    color: var(--foreground, inherit);
    border-color: var(--border-color, none);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: var(--padding-block, 0) var(--padding-inline, 0);
}

@media screen and (max-width: 767px) {
    section {
        --padding-block: var(--section-padding-block-mobile);
        --padding-inline: var(--section-padding-inline-mobile);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    section {
        --padding-block: var(--section-padding-block-tablet);
        --padding-inline: var(--section-padding-inline-tablet);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    section {
        --padding-block: var(--section-padding-block-desktop);
        --padding-inline: var(--section-padding-inline-desktop);
    }
}

@media screen and (min-width: 1440px) {
    section {
        --padding-block: var(--section-padding-block-wide);
        --padding-inline: var(--section-padding-inline-wide);
    }
}

@media screen and (max-width: 767px) {
    section.extra-space {
        --padding-inline: var(--section-extra-padding-inline-mobile);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    section.extra-space {
        --padding-inline: var(--section-extra-padding-inline-tablet);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    section.extra-space {
        --padding-inline: var(--section-extra-padding-inline-desktop);
    }
}

@media screen and (min-width: 1440px) {
    section.extra-space {
        --padding-inline: var(--section-extra-padding-inline-wide);
    }
}

section.background--transparent {
    --background: transparent;
}

section.background--white-50 {
    --background: var(--color-white-50);
}

section.background--white-100 {
    --background: var(--color-white-100);
}

section.background--gray-light {
    --background: var(--color-gray-light);
}

section.background--gray-solid {
    --background: var(--color-gray-solid);
}

section.background--brand-light {
    --background: var(--color-brand-light);
}

section.background--brand-solid {
    --background: var(--color-brand-solid);
}

section.foreground--black {
    --foreground: var(--color-fg-black);
}

section.foreground--white {
    --foreground: var(--color-fg-white);
}

section.background-image {
    --background: transparent;
    overflow: hidden;
    position: relative;
}

section.height--auto {
    min-height: 0;
}

section.height--50 {
    min-height: 50vh;
}

section.height--75 {
    min-height: 75vh;
}

section.height--100 {
    min-height: 100vh;
}

.section-main-navigation {
    z-index: 99;
    border-style: var(--section-main-navigation-border-style, none);
    border-width: var(--section-main-navigation-border-width, 0);
    border-color: var(--section-main-navigation-border-color, transparent);
}

.section-main-navigation.fixed {
    --background: var(--section-main-navigation-fixed-background, inherit);
}

.box {
    --border-width: var(--box-border-width, inherit);
    --border-style: var(--box-border-style, solid);
    --border: var(--border-width) var(--border-style) var(--border-color);
    --border-radius: var(--box-border-radius, inherit);
    position: relative;
    overflow: hidden;
    width: var(--width, 100%);
    max-width: 100%;
    background: var(--background, transparent);
    color: var(--foreground, inherit);
    border: var(--border, inherit);
    border-radius: var(--border-radius, inherit);
    box-shadow: var(--shadow, none);
    padding: var(--padding, inherit);
    transition: all 0.15s ease-in-out;
    transform: var(--transform, none);
}

@media screen and (max-width: 767px) {
    .box {
        --padding: var(--box-padding-mobile, 0);
    }
}

@media screen and (min-width: 768px) {
    .box {
        --padding: var(--box-padding-desktop, 0);
    }
}

.box.background--transparent {
    --background: transparent;
}

.box.background--white-50 {
    --background: var(--color-white-50);
}

.box.background--white-100 {
    --background: var(--color-white-100);
}

.box.background--gray-light {
    --background: var(--color-gray-light);
}

.box.background--gray-solid {
    --background: var(--color-gray-solid);
}

.box.background--brand-light {
    --background: var(--color-brand-light);
}

.box.background--brand-solid {
    --background: var(--color-brand-solid);
}

.box.border--transparent {
    --border-color: transparent;
    border-style: hidden;
}

.box.border--white-50 {
    --border-color: var(--color-white-50);
}

.box.border--white-100 {
    --border-color: var(--color-white-100);
}

.box.border--gray-light {
    --border-color: var(--color-gray-light);
}

.box.border--gray-solid {
    --border-color: var(--color-gray-solid);
}

.box.border--brand-light {
    --border-color: var(--color-brand-light);
}

.box.border--brand-solid {
    --border-color: var(--color-brand-solid);
}

.box.border--shadow {
    --shadow: var(--box-shadow);
}

.box.foreground--black {
    --foreground: var(--color-fg-black);
}

.box.foreground--white {
    --foreground: var(--color-fg-white);
}

.box.clickable {
    position: relative;
    cursor: pointer;
}

.box.clickable a:not(.link-area),
.box.clickable a.box-button:not(.link-area),
.box.clickable a.link-button:not(.link-area),
.box.clickable a.icon-button:not(.link-area),
.box.clickable a.link:not(.link-area) {
    position: static;
}

.box.clickable a.link-area,
.box.clickable a.box-button.link-area,
.box.clickable a.link-button.link-area,
.box.clickable a.icon-button.link-area,
.box.clickable a.link.link-area {
    position: absolute;
}

.box.clickable a::after,
.box.clickable a.box-button::after,
.box.clickable a.link-button::after,
.box.clickable a.icon-button::after,
.box.clickable a.link::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
}

.avatar {
    --background: var(--avatar-background);
    --foreground: var(--avatar-foreground);
    --border: var(--avatar-border);
    --border-radius: var(--avatar-border-radius, 9999px);
    display: grid;
    position: relative;
    aspect-ratio: var(--avatar-aspect-ratio, 1/1);
    font-size: var(--avatar-font-size);
    height: max-content;
}

.avatar > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-self: center;
    justify-self: center;
    border-radius: var(--border-radius);
    background: var(--background);
    font-size: inherit;
}

.avatar > span > svg {
    width: var(--avatar-font-size);
    height: var(--avatar-font-size);
}

.avatar .button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    right: 0;
    width: var(--avatar-button-size);
    height: var(--avatar-button-size);
}

.avatar .button > svg {
    width: var(--avatar-button-size);
    height: var(--avatar-button-size);
}

.avatar > picture {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.avatar > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar.clickable {
    cursor: pointer;
}

.avatar.xxs {
    width: var(--avatar-size-xxs);
    --avatar-button-size: var(--avatar-button-size-xxs);
    --avatar-font-size: var(--avatar-font-size-xxs);
}

.avatar.xs {
    width: var(--avatar-size-xs);
    --avatar-button-size: var(--avatar-button-size-xs);
    --avatar-font-size: var(--avatar-font-size-xs);
}

.avatar.sm {
    width: var(--avatar-size-sm);
    --avatar-button-size: var(--avatar-button-size-sm);
    --avatar-font-size: var(--avatar-font-size-sm);
}

.avatar.md {
    width: var(--avatar-size-md);
    --avatar-button-size: var(--avatar-button-size-md);
    --avatar-font-size: var(--avatar-font-size-md);
}

.avatar.lg {
    width: var(--avatar-size-lg);
    --avatar-button-size: var(--avatar-button-size-lg);
    --avatar-font-size: var(--avatar-font-size-lg);
}

.avatar.xl {
    width: var(--avatar-size-xl);
    --avatar-button-size: var(--avatar-button-size-xl);
    --avatar-font-size: var(--avatar-font-size-xl);
}

.avatar.xxl {
    width: var(--avatar-size-xxl);
    --avatar-button-size: var(--avatar-button-size-xxl);
    --avatar-font-size: var(--avatar-font-size-xxl);
}

.avatar-name {
    --background: var(--avatar-name-background, transparent);
    --foreground: var(--avatar-name-foreground, inherit);
    --border: var(--avatar-name-border, none);
    --border-radius: var(--avatar-name-border-radius, 9999px);
    --padding: var(--avatar-name-padding, 0);
    --gap: var(--avatar-name-gap, var(--spacing-small));
    display: inline-flex;
    flex-direction: var(--avatar-name-flex-direction, row);
    flex-wrap: wrap;
    position: relative;
    align-items: var(--avatar-name-align-items, center);
    justify-content: var(--avatar-name-justify-content, flex-start);
    gap: var(--gap);
    width: fit-content;
    height: fit-content;
    background: var(--background);
    color: var(--foreground);
    border: var(--border);
    border-radius: var(--border-radius);
    padding: var(--padding);
}

.avatar-name .avatar {
    flex-shrink: 0;
}

.avatar-name__body {
    --p-margin-bottom-mobile: 0;
    --p-margin-bottom-desktop: 0;
    --p-margin-top-desktop: 0;
    --p-margin-top-mobile: 0;
}

.badge {
    --background: inherit;
    --color: inherit;
    --border: inherit;
    --border-radius: inherit;
    position: relative;
    display: inline-flex;
    align-items: center;
    background: var(--background);
    color: var(--foreground);
    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: fit-content;
    height: fit-content;
    font-weight: var(--badge-font-weight);
    font-size: var(--font-size);
    line-height: var(--line-height);
    padding: var(--padding);
    gap: var(--gap);
}

.badge .link {
    position: static;
    --border: none;
    --padding: 0;
    --shadow: none;
    --decoration: none;
    --foreground: var(--foreground);
    --background: transparent;
    font-weight: var(--badge-font-weight);
    --font-size: inherit;
    --line-height: inherit;
    text-decoration: none;
    cursor: pointer;
}

.badge .link::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: 0;
}

.badge .badge__close-button {
    align-self: center;
    display: flex;
    cursor: pointer;
    opacity: 0.5;
    --foreground: var(--badge-close-button-color, var(--foreground));
}

.badge .badge__close-button svg {
    width: var(--badge-close-button-size, 1em);
    height: var(--badge-close-button-size, 1em);
}

.badge.size--sm {
    --padding: var(--badge-padding-sm);
    --font-size: var(--badge-font-size-sm);
    --line-height: var(--badge-line-height-sm);
    --gap: var(--badge-gap-sm);
    --border-radius: var(--badge-border-radius-sm);
}

.badge.size--md {
    --padding: var(--badge-padding-md);
    --font-size: var(--badge-font-size-md);
    --line-height: var(--badge-line-height-md);
    --gap: var(--badge-gap-md);
    --border-radius: var(--badge-border-radius-md);
}

.badge.size--lg {
    --padding: var(--badge-padding-lg);
    --font-size: var(--badge-font-size-lg);
    --line-height: var(--badge-line-height-lg);
    --gap: var(--badge-gap-lg);
    --border-radius: var(--badge-border-radius-lg);
}

.badge.style--gray {
    --background: var(--badge-gray-background);
    --foreground: var(--badge-gray-color);
    --border: var(--badge-gray-border);
}

.badge.style--brand {
    --background: var(--badge-brand-background);
    --foreground: var(--badge-brand-color);
    --border: var(--badge-brand-border);
}

.badge.style--inverse {
    --background: var(--badge-inverse-background);
    --foreground: var(--badge-inverse-color);
    --border: var(--badge-inverse-border);
}

.badge.style--bw {
    --background: var(--badge-bw-background);
    --foreground: var(--badge-bw-color);
    --border: var(--badge-bw-border);
}

.badge.style--success {
    --background: var(--badge-success-background);
    --foreground: var(--badge-success-color);
    --border: var(--badge-success-border);
}

.badge.style--warning {
    --background: var(--badge-warning-background);
    --foreground: var(--badge-warning-color);
    --border: var(--badge-warning-border);
}

.badge.style--danger {
    --background: var(--badge-danger-background);
    --foreground: var(--badge-danger-color);
    --border: var(--badge-danger-border);
}

.layout--badge-set {
    --column-gap-mobile: var(--badge-set-column-gap, 4px);
    --row-gap-mobile: var(--badge-set-row-gap, 4px);
    --column-gap-desktop: var(--badge-set-column-gap, 4px);
    --row-gap-desktop: var(--badge-set-row-gap, 4px);
}

hr,
.line {
    box-sizing: content-box;
    outline: none;
    border: none;
    height: var(--line-width, 1px);
    width: var(--line-length, 100%);
    background-color: var(--line-color);
    background-image: var(--line-background-image);
    background-repeat: var(--line-background-repeate);
    max-width: 100%;
    margin: var(--line-margin, 1rem 0);
}

hr--black,
.line--black {
    --line-width: var(--line-black-width, 1px);
    --line-color: var(--line-black-color, black);
    --line-background-image: var(--line-black-background-image);
    --line-background-repeat: var(--line-black-background-repeat);
    --line-margin: var(--line-black-margin, 1rem 0);
}

hr--white,
.line--white {
    --line-width: var(--line-white-width, 1px);
    --line-color: var(--line-white-color, #fff);
    --line-background-image: var(--line-white-background-image);
    --line-background-repeat: var(--line-white-background-repeat);
    --line-margin: var(--line-white-margin, 1rem 0);
}

hr--gray,
.line--gray {
    --line-width: var(--line-gray-width, 1px);
    --line-color: var(--line-gray-color, #ccc);
    --line-background-image: var(--line-gray-background-image);
    --line-background-repeat: var(--line-gray-background-repeat);
    --line-margin: var(--line-gray-margin, 1rem 0);
}

@media (max-width: 1024px) {

    hr.narrow,
    .line.narrow {
        --line-length: var(--line-default-length-mobile, 100px);
    }
}

@media (min-width: 1025px) {

    hr.narrow,
    .line.narrow {
        --line-length: var(--line-default-length-desktop, 165px);
    }
}

.tab {
    --background: var(--tab-background);
    --foreground: var(--tab-foreground);
    --border: var(--tab-border);
    --border-radius: var(--tab-border-radius);
    --shadow: var(--tab-box-shadow);
    --font-weight: var(--tab-font-weight);
    --font-size: var(--tab-font-size);
    --line-height: var(--tab-line-height);
    --padding: var(--tab-padding);
    --gap: var(--tab-gap);
    --background-active: var(--tab-background-active);
    --foreground-active: var(--tab-foreground-active);
    --border-active: var(--tab-border-active);
    --border-radius-active: var(--tab-border-radius-active);
    --font-weight-active: var(--tab-font-weight-active);
    --font-size-active: var(--tab-font-size-active);
    --line-height-active: var(--tab-line-height-active);
    display: flex;
    align-items: center;
    width: fit-content;
    height: auto;
    background: var(--background);
    color: var(--foreground);
    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    line-height: var(--line-height);
    padding: var(--padding);
    gap: var(--gap);
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
    cursor: pointer;
}

.tab.active,
.tab[aria-selected=true],
.tab:hover {
    --background: var(--tab-background-active);
    --foreground: var(--tab-foreground-active);
    --border: var(--tab-border-active);
    --border-radius: var(--tab-border-radius-active);
    --shadow: var(--tab-box-shadow-active);
    --font-weight: var(--tab-font-weight-active);
    --font-size: var(--tab-font-size-active);
    --line-height: var(--tab-line-height-active);
}

.tab .badge {
    --shadow: none;
}

nav.tab-group {
    display: flex;
    padding-bottom: var(--tab-active-border-width, 2px);
    box-shadow: var(--tab-group-box-shadow, inset 0 -1px 0 0 var(--line-black-color));
    overflow: auto;
    gap: var(--tab-group-gap, 12px);
}

.quote {
    display: flex;
    flex-direction: column;
    gap: var(--gap, var(--spacing-large, 24px));
    width: var(--width, var(--max-content-width, 740px));
    max-width: 100%;
    background: var(--background, transparent);
    color: var(--foreground, inherit);
    border: var(--border, none);
    border-radius: var(--border-radius, 0);
    box-shadow: var(--shadow, none);
    padding: var(--padding, 0);
}

.quote * {
    --foreground: inherit;
}

.quote blockquote {
    display: block;
    text-align: var(--text-align);
}

.quote blockquote p + p {
    margin-top: var(--quote-blockquote-paragraph-gap, var(--spacing-small));
}

.quote blockquote h1,
.quote blockquote h2,
.quote blockquote h3,
.quote blockquote h4,
.quote blockquote h5,
.quote blockquote h6,
.quote blockquote p,
.quote blockquote div,
.quote blockquote ul,
.quote blockquote ol,
.quote blockquote li {
    color: var(--quote-message-foreground, inherit);
    max-width: 100%;
}

.quote blockquote h1:last-child,
.quote blockquote h2:last-child,
.quote blockquote h3:last-child,
.quote blockquote h4:last-child,
.quote blockquote h5:last-child,
.quote blockquote h6:last-child,
.quote blockquote p:last-child,
.quote blockquote div:last-child,
.quote blockquote ul:last-child,
.quote blockquote ol:last-child,
.quote blockquote li:last-child {
    margin-bottom: 0;
}

.quote figcaption {
    display: flex;
    flex-direction: column;
    align-self: var(--quote-caption-align-self, center);
    justify-self: var(--quote-caption-justify-self, flex-start);
}

.quote figcaption,
.quote figcaption > * {
    text-align: var(--quote-caption-text-align, center) !important;
}

.quote.layout--full {
    --padding: var(--quote-full-padding-mobile, 0);
    --gap: var(--quote-full-gap-mobile, 24px);
    --border-radius: var(--quote-full-border-radius-mobile, 0);
}

@media screen and (min-width: 768px) {
    .quote.layout--full {
        --padding: var(--quote-full-padding-desktop, 0);
        --gap: var(--quote-full-gap-desktop, 24px);
        --border-radius: var(--quote-full-border-radius-desktop, 0);
    }
}

.quote.layout--full.style--black {
    --background: var(--quote-full-black-background, transparent);
    --foreground: var(--quote-full-black-foreground, var(--color-fg-black));
    --quote-message-foreground: var(--quote-full-black-message-foreground, var(--foreground));
    --shadow: var(--quote-full-black-shadow, none);
    --border: var(--quote-full-black-border, none);
}

.quote.layout--full.style--white {
    --background: var(--quote-full-white-background, transparent);
    --foreground: var(--quote-full-white-foreground, var(--color-fg-white));
    --quote-message-foreground: var(--quote-full-white-message-foreground, var(--foreground));
    --shadow: var(--quote-full-white-shadow, none);
    --border: var(--quote-full-white-border, none);
}

.quote.layout--card {
    --padding: var(--quote-card-padding-mobile, 32px);
    --gap: var(--quote-card-gap-mobile, 32px);
    --border-radius: var(--quote-card-border-radius-mobile, var(--border-radius-small, 12px));
}

@media screen and (min-width: 768px) {
    .quote.layout--card {
        --padding: var(--quote-card-padding-desktop, 32px);
        --gap: var(--quote-card-gap-desktop, 32px);
        --border-radius: var(--quote-card-border-radius-desktop, var(--border-radius-medium, 12px));
    }
}

.quote.layout--card.style--black {
    --background: var(--quote-card-black-background, var(--color-neutral-50));
    --foreground: var(--quote-card-black-foreground, var(--color-fg-black));
    --quote-message-foreground: var(--quote-card-black-message-foreground, var(--foreground));
    --shadow: var(--quote-card-black-shadow, none);
    --border: var(--quote-card-black-border, none);
}

.quote.layout--card.style--white {
    --background: var(--quote-card-white-background, rgba(255, 255, 255, 0.20));
    --foreground: var(--quote-card-white-foreground, var(--color-fg-white));
    --quote-message-foreground: var(--quote-card-white-message-foreground, var(--foreground));
    --shadow: var(--quote-card-white-shadow, none);
    --border: var(--quote-card-white-border, none);
}

.quote.centered {
    --text-align: center;
    --quote-caption-align-self: center;
    --quote-caption-justify-self: center;
}

.quote.centered .rating {
    align-self: center;
}

@media screen and (max-width: 767px) {

    .gallery,
    .gallery .layout--gallery,
    .gallery .layout--gallery .collage-group {
        --grid-column-gap-mobile: var(--gallery-column-gap-mobile);
        --grid-row-gap-mobile: var(--gallery-row-gap-mobile);
        --column-gap-mobile: var(--gallery-column-gap-mobile);
        --row-gap-mobile: var(--gallery-row-gap-mobile);
    }
}

@media screen and (min-width: 768px) {

    .gallery,
    .gallery .layout--gallery,
    .gallery .layout--gallery .collage-group {
        --grid-column-gap-desktop: var(--gallery-column-gap-desktop);
        --grid-row-gap-desktop: var(--gallery-row-gap-desktop);
        --column-gap-desktop: var(--gallery-column-gap-desktop);
        --row-gap-desktop: var(--gallery-row-gap-desktop);
    }
}

.gallery--featured > .grid > *:first-child {
    grid-column: 1/-1;
}

.gallery--collage .layout--gallery {
    --grid-cols: 1;
    --grid-cols-mobile: 1;
    --grid-cols-tablet: 1;
    --grid-cols-desktop: 1;
    --grid-cols-wide: 1;
}

.gallery--collage .layout--gallery .collage-group--2 {
    --grid-cols: 2;
    --span-mobile: var(--gallery-collage-group-2-columns-mobile, 2);
    --span-tablet: var(--gallery-collage-group-2-columns-tablet, 1);
    --span-desktop: var(--gallery-collage-group-2-columns-desktop, 1);
    --span-wide: var(--gallery-collage-group-2-columns-wide, 1);
}

.gallery--collage .layout--gallery .collage-group--3 {
    --grid-cols: 3;
    --span-mobile: var(--gallery-collage-group-3-columns-mobile, 3);
    --span-tablet: var(--gallery-collage-group-3-columns-tablet, 1);
    --span-desktop: var(--gallery-collage-group-3-columns-desktop, 1);
    --span-wide: var(--gallery-collage-group-3-columns-wide, 1);
}

.gallery--collage .layout--gallery .collage-group--4 {
    --grid-cols: 4;
    --span-mobile: var(--gallery-collage-group-4-columns-mobile, 4);
    --span-tablet: var(--gallery-collage-group-4-columns-tablet, 1);
    --span-desktop: var(--gallery-collage-group-4-columns-desktop, 1);
    --span-wide: var(--gallery-collage-group-4-columns-wide, 1);
}

.gallery--collage .layout--gallery .collage-group--5 {
    --grid-cols: 5;
    --span-mobile: var(--gallery-collage-group-5-columns-mobile, 5);
    --span-tablet: var(--gallery-collage-group-5-columns-tablet, 2);
    --span-desktop: var(--gallery-collage-group-5-columns-desktop, 2);
    --span-wide: var(--gallery-collage-group-5-columns-wide, 2);
}

.gallery--collage .layout--gallery .collage-group--6 {
    --grid-cols: 6;
    --span-mobile: var(--gallery-collage-group-6-columns-mobile, 6);
    --span-tablet: var(--gallery-collage-group-6-columns-tablet, 2);
    --span-desktop: var(--gallery-collage-group-6-columns-desktop, 2);
    --span-wide: var(--gallery-collage-group-6-columns-wide, 1);
}

.grid {
    --max-col-count: 3;
    --min-col-size: 300px;
    --col-size-calc: calc((100% - var(--column-gap) * var(--max-col-count)) / var(--max-col-count));
    --grid-col-min-size-calc: min(max(var(--min-col-size), var(--col-size-calc)), 100%);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-min-size-calc), 1fr));
    gap: var(--row-gap) var(--column-gap);
}

@media screen and (max-width: 767px) {
    .grid {
        --column-gap: var(--grid-column-gap-mobile, var(--spacing-large));
        --row-gap: var(--grid-row-gap-mobile, var(--spacing-large));
    }

    .grid.scrollable {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        /* Hide scrollbar for Firefox */
        -ms-overflow-style: none;
        /* Hide scrollbar for Internet Explorer and Edge */
    }

    .grid.scrollable::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar for Chrome, Safari, and Opera */
    }

    .grid.scrollable > * {
        flex: 0 0 auto;
        flex-basis: var(--grid-scrollable-col-size, 90%);
    }
}

@media screen and (min-width: 768px) {
    .grid {
        --column-gap: var(--grid-column-gap-desktop, var(--spacing-4x-large));
        --row-gap: var(--grid-row-gap-desktop, var(--spacing-4x-large));
    }
}

.grid.has-1-columns {
    --max-col-count: 1;
}

.grid.has-2-columns {
    --max-col-count: 2;
}

.grid.has-3-columns {
    --max-col-count: 3;
}

.grid.has-4-columns {
    --max-col-count: 4;
}

.grid.has-5-columns {
    --max-col-count: 5;
}

.grid.has-6-columns {
    --max-col-count: 6;
}

.grid.item-width-xxs {
    --min-col-size: 100px;
}

.grid.item-width-xs {
    --min-col-size: 200px;
}

.grid.item-width-sm {
    --min-col-size: 300px;
}

.grid.item-width-md {
    --min-col-size: 400px;
}

@media screen and (max-width: 420px) {
    .grid.item-width-md {
        --max-col-count: 1;
        grid-template-columns: 1fr;
    }
}

.grid.item-width-lg {
    --min-col-size: 500px;
}

@media screen and (max-width: 525px) {
    .grid.item-width-lg {
        --max-col-count: 1;
        grid-template-columns: 1fr;
    }
}

.grid.item-width-xl {
    --min-col-size: 600px;
}

@media screen and (max-width: 640px) {
    .grid.item-width-xl {
        --max-col-count: 1;
        grid-template-columns: 1fr;
    }
}

.grid.item-width-xxl {
    --min-col-size: 700px;
}

@media screen and (max-width: 768px) {
    .grid.item-width-xxl {
        --max-col-count: 1;
        grid-template-columns: 1fr;
    }
}

.grid > .grid-item,
.grid > * {
    max-width: 100% !important;
}

.grid--buttons > * {
    width: auto;
}

.layout {
    /* --- VÝCHOZÍ NASTAVENÍ (Desktop) --- */
    /* Počet sloupců */
    --grid-cols: 12;
    display: block;
    box-sizing: border-box;
    /* Container query setup */
    column-gap: var(--column-gap, 20px);
    row-gap: var(--row-gap, 20px);
}

.layout.columns {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    /* Fixní mřížka */
    align-items: var(--layout-columns-align-items, stretch);
    justify-content: var(--layout-columns-justify-content, flex-start);
    width: 100%;
    /* --- RESPONZIVITA (Mobil) --- */
    /* Děti se nyní roztahují pomocí span */
    /* Ignorování pomocných elementů */
    /* --- BREAKPOINTS --- */
    /* Zde už neměníme grid rodiče, ale čteme proměnné pro děti */
    /* Mobile - Default (nastaveno výše) */
    /* Tablet */
    /* Desktop */
    /* Wide */
}

@media screen and (max-width: 767px),
print and (max-width: 767px) {
    .layout.columns {
        /* Na mobilu přepneme na 6 sloupců a menší mezeru */
        --grid-cols: var(--grid-cols-mobile, 4);
    }
}

.layout.columns > * {
    /* Defaultně na mobilu zabere vše */
    grid-column: span var(--span-mobile, 4);
    height: var(--height, fit-content);
}

.layout.columns > *.apply-margins {
    --default-margin-top: 0;
}

.layout.columns.has-highlighted-item > *:first-child,
.layout.columns > *:is(hr) {
    grid-column: 1/-1;
    /* Nebo jiné chování */
}

@media screen and (min-width: 768px) and (max-width: 1079px),
print and (min-width: 768px) and (max-width: 1079px) {
    .layout.columns {
        --grid-cols: var(--grid-cols-tablet, 12);
    }

    .layout.columns > * {
        grid-column: span var(--span-tablet, 6);
        /* Default 1/2 šířky */
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px),
print and (min-width: 1080px) and (max-width: 1439px) {
    .layout.columns {
        --grid-cols: var(--grid-cols-desktop, 12);
    }

    .layout.columns > * {
        grid-column: span var(--span-desktop, 4);
        /* Default 1/3 šířky */
    }
}

@media screen and (min-width: 1440px),
print and (min-width: 1440px) {
    .layout.columns {
        --grid-cols: var(--grid-cols-wide, 12);
    }

    .layout.columns > * {
        grid-column: span var(--span-wide, 3);
        /* Default 1/4 šířky */
    }
}

.layout.flexible {
    width: var(--width, auto);
    max-width: 100%;
    display: flex;
    flex-direction: var(--flexible-direction, row);
    flex-wrap: wrap;
    align-items: var(--layout-flexible-align-items, stretch);
    justify-content: var(--layout-flexible-justify-content, flex-start);
}

.layout.flexible > *:not(hr, [class*=button]) {
    width: var(--flexible-col-size, max-content);
    max-width: 100%;
}

.layout.flexible.space-between {
    --layout-flexible-justify-content: space-between;
}

.layout.masonry {
    column-count: var(--columns, 3);
    column-gap: var(--column-gap);
    width: 100%;
    /* Mobile */
    /* Tablet */
    /* Desktop */
    /* Wide */
}

.layout.masonry > * {
    break-inside: avoid;
    margin-bottom: var(--row-gap);
    width: 100%;
}

@media screen and (max-width: 767px),
print and (max-width: 767px) {
    .layout.masonry {
        --columns: var(--columns-mobile, 1);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px),
print and (min-width: 768px) and (max-width: 1079px) {
    .layout.masonry {
        --columns: var(--columns-tablet, 2);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px),
print and (min-width: 1080px) and (max-width: 1439px) {
    .layout.masonry {
        --columns: var(--columns-desktop, 3);
    }
}

@media screen and (min-width: 1440px),
print and (min-width: 1440px) {
    .layout.masonry {
        --columns: var(--columns-wide, 4);
    }
}

@media screen and (max-width: 767px),
print and (max-width: 767px) {
    .layout {
        --column-gap: var(--column-gap-mobile, var(--layout-default-column-gap-mobile, 2rem));
        --row-gap: var(--row-gap-mobile, var(--layout-default-row-gap-mobile, 2rem));
    }
}

@media screen and (min-width: 768px),
print and (min-width: 768px) {
    .layout {
        --column-gap: var(--column-gap-desktop, var(--layout-default-column-gap-desktop, 4rem));
        --row-gap: var(--row-gap-desktop, var(--layout-default-row-gap-desktop, 4rem));
    }
}

.layout .quote {
    --width: auto;
}

.layout--cards {
    --column-gap-mobile: var(--layout-cards-column-gap-mobile, 8px);
    --row-gap-mobile: var(--layout-cards-row-gap-mobile, 8px);
    --column-gap-desktop: var(--layout-cards-column-gap-desktop, 8px);
    --row-gap-desktop: var(--layout-cards-row-gap-desktop, 8px);
}

.layout--tiles {
    --column-gap-mobile: var(--layout-tiles-column-gap-mobile, 1.5rem);
    --row-gap-mobile: var(--layout-tiles-row-gap-mobile, 1.5rem);
    --column-gap-desktop: var(--layout-tiles-column-gap-desktop, 1.5rem);
    --row-gap-desktop: var(--layout-tiles-row-gap-desktop, 1.5rem);
}

.layout--mixed {
    --column-gap-mobile: var(--layout-mixed-column-gap-mobile, 1.5rem);
    --row-gap-mobile: var(--layout-mixed-row-gap-mobile, 1.5rem);
    --column-gap-desktop: var(--layout-mixed-column-gap-desktop, 1.5rem);
    --row-gap-desktop: var(--layout-mixed-row-gap-desktop, 1.5rem);
}

.layout--quotes {
    --column-gap-mobile: var(--layout-quotes-full-column-gap-mobile, 1.5rem);
    --row-gap-mobile: var(--layout-quotes-full-row-gap-mobile, 1.5rem);
    --column-gap-desktop: var(--layout-quotes-full-column-gap-desktop, 1.5rem);
    --row-gap-desktop: var(--layout-quotes-full-row-gap-desktop, 1.5rem);
}

.layout--quote-cards {
    --column-gap-mobile: var(--layout-quotes-card-column-gap-mobile, 1.5rem);
    --row-gap-mobile: var(--layout-quotes-card-row-gap-mobile, 1.5rem);
    --column-gap-desktop: var(--layout-quotes-card-column-gap-desktop, 1.5rem);
    --row-gap-desktop: var(--layout-quotes-card-row-gap-desktop, 1.5rem);
    --height: auto;
}

.layout--text-blocks {
    --column-gap-mobile: var(--layout-text-blocks-column-gap-mobile, var(--layout-cards-column-gap-mobile, 1.5rem));
    --row-gap-mobile: var(--layout-text-blocks-row-gap-mobile, var(--layout-cards-row-gap-mobile, 1.5rem));
    --column-gap-desktop: var(--layout-text-blocks-column-gap-desktop, var(--layout-cards-column-gap-desktop, 1.5rem));
    --row-gap-desktop: var(--layout-text-blocks-row-gap-desktop, var(--layout-cards-row-gap-desktop, 1.5rem));
}

.layout--feature-cards {
    --column-gap-mobile: var(--layout-feature-cards-column-gap-mobile, 1.5rem);
    --row-gap-mobile: var(--layout-feature-cards-row-gap-mobile, 1.5rem);
    --column-gap-desktop: var(--layout-feature-cards-column-gap-desktop, 1.5rem);
    --row-gap-desktop: var(--layout-feature-cards-row-gap-desktop, 1.5rem);
}

.layout--reset {
    column-gap: 0;
    row-gap: 0;
}

@media screen and (max-width: 767px),
print and (max-width: 767px) {

    .layout.layout--signpost > .fullwidth-image > picture,
    .layout.layout--signpost > .fullwidth-image > picture > img,
    .layout.layout--signpost > .grid-column > picture,
    .layout.layout--signpost > .grid-column > picture > img,
    .layout.layout--signpost > picture,
    .layout.layout--signpost > picture > img {
        --image-aspect-ratio: 2/1 !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1439px),
print and (min-width: 768px) and (max-width: 1439px) {

    .layout.layout--signpost > .fullwidth-image > picture,
    .layout.layout--signpost > .fullwidth-image > picture > img,
    .layout.layout--signpost > .grid-column > picture,
    .layout.layout--signpost > .grid-column > picture > img,
    .layout.layout--signpost > picture,
    .layout.layout--signpost > picture > img {
        --image-aspect-ratio: 3/1 !important;
    }

    .layout.layout--signpost > picture,
    .layout.layout--signpost > .fullwidth-image {
        height: 100% !important;
    }
}

.breadcrumbs {
    --breadcrumbs-gap: inherit;
    --breadcrumbs-separator-color: inherit;
    --breadcrumbs-link-text-decoration: inherit;
    --breadcrumbs-link-text-decoration-hover: inherit;
    --breadcrumbs-link-color: inherit;
    --breadcrumbs-link-color-hover: var(--breadcrumbs-link-color);
    --breadcrumbs-link-font-family: var(--font-family-sans);
    --breadcrumbs-link-font-weight: var(--font-weight-normal);
    --breadcrumbs-link-font-size: inherit;
    --breadcrumbs-link-line-height: inherit;
}

.breadcrumbs > ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--breadcrumbs-gap);
}

.breadcrumbs > ul > li {
    display: flex;
    margin-bottom: 0;
}

.breadcrumbs > ul > li .separator {
    display: flex;
    color: var(--breadcrumbs-separator-color);
}

.breadcrumbs > ul > li .separator svg,
.breadcrumbs > ul > li .separator svg > * {
    color: var(--breadcrumbs-separator-color);
}

.breadcrumbs > ul > li a.icon-button {
    --size: max-content;
}

.breadcrumbs > ul > li a.link {
    --link-text-decoration: var(--breadcrumbs-link-text-decoration);
    --link-text-decoration-hover: var(--breadcrumbs-link-text-decoration-hover);
    --link-color: var(--breadcrumbs-link-color);
    --link-color-hover: var(--breadcrumbs-link-color-hover);
    --link-font-family: var(--breadcrumbs-link-font-family, var(--font-family-sans));
    --link-font-weight: var(--breadcrumbs-link-font-weight);
    --link-font-size: var(--breadcrumbs-link-font-size);
    --link-line-height: var(--breadcrumbs-link-line-height);
}

.breadcrumbs > ul > li:last-child > a.link {
    --link-color: var(--breadcrumbs-link-last-color);
}

.breadcrumbs > ul > li:last-child > a.link:hover {
    --link-color-hover: var(--breadcrumbs-link-last-color-hover);
}

.layout--button-set {
    --column-gap-mobile: var(--button-set-column-gap-mobile, 12px);
    --row-gap-mobile: var(--button-set-row-gap-mobile, 12px);
    --column-gap-desktop: var(--button-set-column-gap-desktop, 16px);
    --row-gap-desktop: var(--button-set-row-gap-desktop, 16px);
}

.layout--button-set.horizontal {
    --flexible-direction: row;
}

.layout--button-set.vertical {
    --flexible-direction: column;
}

.layout--button-set.left {
    --layout-flexible-justify-content: flex-start;
}

.layout--button-set.center {
    --layout-flexible-justify-content: center;
}

.layout--button-set.right {
    --layout-flexible-justify-content: flex-end;
}

.hero-section {
    --span-mobile: 4;
    --span-tablet: 6;
    --span-desktop: 6;
    --span-wide: 6;
    padding: var(--hero-section-padding-mobile, inherit);
}

@media screen and (max-width: 767px) {
    .hero-section {
        padding: var(--hero-section-padding-mobile, inherit);
        --column-gap-mobile: var(--hero-section-column-gap-mobile, var(--spacing-large));
        --row-gap-mobile: var(--hero-section-row-gap-mobile, var(--spacing-large));
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .hero-section {
        padding: var(--hero-section-padding-tablet, inherit);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    .hero-section {
        padding: var(--hero-section-padding-desktop, inherit);
        --column-gap-desktop: var(--hero-section-column-gap-desktop, var(--spacing-4x-large));
        --row-gap-desktop: var(--hero-section-row-gap-desktop, var(--spacing-4x-large));
    }
}

@media screen and (min-width: 1440px) {
    .hero-section {
        padding: var(--hero-section-padding-wide, inherit);
        --column-gap-desktop: var(--hero-section-column-gap-desktop, var(--spacing-4x-large));
        --row-gap-desktop: var(--hero-section-row-gap-desktop, var(--spacing-4x-large));
    }
}

.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.background-layer > img,
.background-layer > picture,
.background-layer > video,
.background-layer > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.icon-label {
    --text-color: var(--icon-label-text-color, inherit);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--icon-label-gap, var(--spacing-x-small));
}

.icon-label__icon {
    --text-color: var(--icon-label-icon-color, var(--color));
}

.modal {
    display: flex;
    flex-direction: column;
    padding: var(--modal-padding, var(--spacing-small));
    background: var(--modal-background, inherit);
    color: var(--modal-foreground);
    border-radius: var(--modal-border-radius, 0);
    border: var(--modal-border, solid 1px var(--text-color));
    box-shadow: var(--modal-box-shadow, none);
    width: var(--modal-width, 720px);
    height: var(--modal-height, auto);
    max-width: 100vw;
    max-height: 100vw;
}

.modal .modal__header {
    background: var(--modal-header-background, inherit);
    color: var(--modal-header-foreground, inherit);
    border-bottom: var(--modal-header-border, inherit);
    padding: var(--modal-header-padding, 16px 0);
    display: flex;
    align-items: center;
    justify-content: var(--modal-header-justify-content, space-between);
}

.modal .modal__body {
    display: block;
    background: var(--modal-body-background, inherit);
    color: var(--modal-body-foreground, inherit);
    padding: var(--modal-body-padding, 16px 0);
    overflow: var(--modal-body-overflow, auto);
    flex: 1 1 auto;
}

.modal .modal__footer {
    background: var(--modal-footer-background, inherit);
    color: var(--modal-footer-foreground, inherit);
    border-top: var(--modal-footer-border, inherit);
    padding: var(--modal-footer-padding, 16px 0);
    display: flex;
    align-items: center;
    justify-content: var(--modal-footer-justify-content, flex-end);
}

table,
.table {
    width: 100%;
    border-collapse: separate;
    margin: var(--table-spacing);
    background: var(--table-background);
    color: var(--table-foreground);
    border: var(--table-border);
    border-spacing: var(--table-spacing);
    border-radius: var(--table-border-radius);
    box-shadow: var(--table-box-shadow);
    overflow: hidden;
    font-family: var(--table-font-family, var(--font-family-sans, sans-serif));
    font-size: var(--table-font-size, 1rem);
    font-weight: var(--table-font-weight, normal);
    line-height: var(--table-line-height, 1.5);
}

table,
table *,
.table,
.table * {
    transition: background 0.2s, color 0.2s;
    overflow: hidden;
}

table tbody th,
table thead th,
.table tbody th,
.table thead th {
    background: var(--table-header-background);
    color: var(--table-header-foreground);
    padding: var(--table-cell-padding);
    border-bottom: var(--table-header-horizontal-separator);
    font-family: var(--table-header-font-famly);
    font-size: var(--table-header-font-size);
    font-weight: var(--table-header-font-weight);
    line-height: var(--table-header-line-height);
}

table tbody th:not(:last-child),
table thead th:not(:last-child),
.table tbody th:not(:last-child),
.table thead th:not(:last-child) {
    border-inline-end: var(--table-header-vertical-separator);
}

table td,
table th,
.table td,
.table th {
    text-align: left;
}

table td p,
table th p,
.table td p,
.table th p {
    font-size: inherit;
}

table tbody td,
.table tbody td {
    background: var(--table-cell-background);
    color: var(--table-cell-foreground);
    padding: var(--table-cell-padding);
    border-bottom: var(--table-body-horizontal-separator);
    font-family: var(--table-body-font-family);
    font-size: var(--table-body-font-size);
    font-weight: var(--table-body-font-weight);
    line-height: var(--table-body-line-height);
}

table tbody td:not(:last-child),
.table tbody td:not(:last-child) {
    border-inline-end: var(--table-body-vertical-separator);
}

table tbody tr:last-child td,
.table tbody tr:last-child td {
    border-bottom: none;
}

table tfoot td,
table tfoot th,
.table tfoot td,
.table tfoot th {
    background: var(--table-footer-background);
    color: var(--table-footer-foreground);
    padding: var(--table-cell-padding);
    font-family: var(--table-footer-font-family);
    font-size: var(--table-footer-font-size);
    font-weight: var(--table-footer-font-weight);
    line-height: var(--table-footer-line-height);
    border-top: var(--table-footer-horizontal-separator);
}

table tfoot td:not(:last-child),
table tfoot th:not(:last-child),
.table tfoot td:not(:last-child),
.table tfoot th:not(:last-child) {
    border-inline-end: var(--table-footer-vertical-separator);
}

table tbody tr:hover,
.table tbody tr:hover {
    --text-color: var(--table-row-hover-foreground);
    --table-foreground: var(--table-row-hover-foreground);
    background: var(--table-row-hover-background);
    color: var(--table-row-hover-foreground);
}

.layout--signpost,
.grid--signpost {
    --grid-column-gap-mobile: var(--signpost-column-gap-mobile);
    --grid-row-gap-mobile: var(--signpost-row-gap-mobile);
    --grid-column-gap-desktop: var(--signpost-column-gap-desktop);
    --grid-row-gap-desktop: var(--signpost-row-gap-desktop);
    --column-gap-mobile: var(--signpost-column-gap-mobile);
    --row-gap-mobile: var(--signpost-row-gap-mobile);
    --column-gap-desktop: var(--signpost-column-gap-desktop);
    --row-gap-desktop: var(--signpost-row-gap-desktop);
}

.tile {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: var(--height, auto);
    width: 100%;
    background: var(--background, transparent);
    color: var(--foreground, inherit);
    border-width: var(--tile-border-width, 1px);
    border-style: var(--tile-border-style, solid);
    border-color: var(--border-color, transparent);
    border-radius: var(--tile-border-radius, 12px);
    box-shadow: var(--tile-box-shadow, none);
    aspect-ratio: var(--format, 2/1);
    justify-content: center;
    --gradient-color-transparent: transparent;
    --gradient-color-solid: transparent;
    --gradient-top: linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
    --gradient-bottom: linear-gradient(to top, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
    --gradient-center: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.75) 50%,
            rgba(255, 255, 255, 0) 100%);
}

.tile__wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--padding);
    gap: var(--gap);
    background: var(--wrapper-background, transparent);
    z-index: 2;
}

.tile__body {
    flex: 1;
}

.tile .background-layer {
    z-index: 1;
}

.tile.format--auto {
    --format: auto;
}

.tile.format--1_1 {
    --format: 1/1;
}

.tile.format--3_2 {
    --format: 3/2;
}

.tile.format--2_3 {
    --format: 2/3;
}

.tile.format--4_3 {
    --format: 4/3;
}

.tile.format--3_4 {
    --format: 3/4;
}

.tile.format--5_4 {
    --format: 5/4;
}

.tile.format--4_5 {
    --format: 4/5;
}

.tile.format--16_9 {
    --format: 16/9;
}

.tile.format--2_1 {
    --format: 2/1;
}

.tile .background-layer {
    transition: transform 0.3s ease-in-out;
}

.tile a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 10;
}

.tile a::after {
    content: "";
    position: absolute;
}

.tile.clickable:hover .background-layer {
    transform: scale(1.05);
}

.tile picture,
.tile video,
.tile img {
    --image-border-radius: 0;
}

.tile.full-height {
    --format: auto;
    --height: 100%;
    height: 100%;
}

.tile.vertical-align--top {
    justify-content: flex-start;
    --wrapper-background: linear-gradient(to top, var(--gradient-color-transparent) 0%, var(--gradient-color-solid) 23.9%);
}

.tile.vertical-align--center {
    justify-content: center;
    --wrapper-background: linear-gradient(to top,
            var(--gradient-color-transparent) 0%,
            var(--gradient-color-solid) 23.9%,
            var(--gradient-color-solid) 76.1%,
            var(--gradient-color-transparent) 100%);
}

.tile.vertical-align--bottom {
    justify-content: flex-end;
    --wrapper-background: linear-gradient(to bottom, var(--gradient-color-transparent) 0%, var(--gradient-color-solid) 23.9%);
}

.tile.background--transparent {
    --background: transparent;
}

.tile.background--white-50 {
    --background: var(--color-white-50);
}

.tile.background--white-100 {
    --background: var(--color-white-100);
}

.tile.background--gray-light {
    --background: var(--color-gray-light);
}

.tile.background--gray-solid {
    --background: var(--color-gray-solid);
}

.tile.background--brand-light {
    --background: var(--color-brand-light);
}

.tile.background--brand-solid {
    --background: var(--color-brand-solid);
}

.tile.background--image-light {
    --background: transparent;
    --gradient-color-transparent: var(--tile-image-light-gradient-color-transparent, rgba(255, 255, 255, 0));
    --gradient-color-solid: var(--tile-image-light-gradient-color-solid, rgba(255, 255, 255, 0.75));
}

.tile.background--image-dark {
    --background: transparent;
    --gradient-color-transparent: var(--tile-image-dark-gradient-color-transparent, rgba(0, 0, 0, 0));
    --gradient-color-solid: var(--tile-image-dark-gradient-color-solid, rgba(0, 0, 0, 0.75));
}

.tile.border--transparent {
    --border-color: transparent;
    border-style: hidden;
}

.tile.border--white-50 {
    --border-color: var(--color-white-50);
}

.tile.border--white-100 {
    --border-color: var(--color-white-100);
}

.tile.border--gray-light {
    --border-color: var(--color-gray-light);
}

.tile.border--gray-solid {
    --border-color: var(--color-gray-solid);
}

.tile.border--brand-light {
    --border-color: var(--color-brand-light);
}

.tile.border--brand-solid {
    --border-color: var(--color-brand-solid);
}

.tile.foreground--black {
    --foreground: var(--color-fg-black);
}

.tile.foreground--gray {
    --foreground: var(--color-fg-gray);
}

.tile.foreground--white {
    --foreground: var(--color-fg-white);
}

@media screen and (max-width: 767px) {
    .tile {
        --padding: var(--tile-padding-mobile, 20px);
        --gap: var(--tile-gap-mobile, 24px);
    }
}

@media screen and (min-width: 768px) {
    .tile {
        --padding: var(--tile-padding-desktop, 40px);
        --gap: var(--tile-gap-desktop, 24px);
    }
}

.event {
    --background: var(--event-background, white);
    --foreground: var(--event-foreground, var(--box-foreground-default-style));
    --border: var(--event-border, none);
    --shadow: var(--event-shadow, none);
    --background-hover: var(--event-background-hover, inherit);
    --foreground-hover: var(--event-foreground-hover, inherit);
    --shadow-hover: var(--event-shadow-hover, none);
    --padding: var(--event-padding);
    --border-radius: var(--event-border-radius);
    position: relative;
    display: grid;
    grid-template-areas: var(--grid-areas, "");
    grid-template-columns: var(--grid-columns, auto);
    grid-template-rows: var(--grid-rows, auto);
    column-gap: var(--gap);
    background: var(--background);
    color: var(--foreground);
    border: var(--border);
    box-shadow: var(--shadow);
    transition: all 0.3s;
    border-radius: var(--border-radius);
    padding: var(--padding);
    overflow: hidden;
    /* Mobile */
    /* Tablet */
    /* Desktop */
    /* Tablet */
    /* Desktop */
}

.event > *:empty {
    display: none;
}

.event > *:empty > * {
    margin-top: -24px;
}

@media screen and (max-width: 767px) {
    .event {
        --event-padding: var(--event-padding-mobile);
        --event-border-radius: var(--event-border-radius-mobile);
        --gap: var(--event-gap-mobile);
        --grid-areas: var(--event-grid-areas-mobile);
        --grid-columns: var(--event-grid-columns-mobile);
        --grid-rows: var(--event-grid-rows-mobile);
        --dates-top-spacing: var(--event-dates-top-spacing-mobile, 0.5rem);
        --tags-top-spacing: var(--event-tags-top-spacing-mobile, 0.5rem);
        --headline-top-spacing: var(--event-headline-top-spacing-mobile, 0.5rem);
        --body-top-spacing: var(--event-body-top-spacing-mobile, 0.5rem);
        --image-top-spacing: var(--event-image-top-spacing-mobile, 0.5rem);
        --buttons-top-spacing: var(--event-buttons-top-spacing-mobile, 0.5rem);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .event {
        --event-padding: var(--event-padding-tablet);
        --event-border-radius: var(--event-border-radius-tablet);
        --gap: var(--event-gap-tablet);
        --grid-areas: var(--event-grid-areas-tablet);
        --grid-columns: var(--event-grid-columns-tablet);
        --grid-rows: var(--event-grid-rows-tablet);
        --dates-top-spacing: var(--event-dates-top-spacing-tablet, 0.5rem);
        --tags-top-spacing: var(--event-tags-top-spacing-tablet, 0.5rem);
        --headline-top-spacing: var(--event-headline-top-spacing-tablet, 0.5rem);
        --body-top-spacing: var(--event-body-top-spacing-tablet, 0.5rem);
        --image-top-spacing: var(--event-image-top-spacing-tablet, 0.5rem);
        --buttons-top-spacing: var(--event-buttons-top-spacing-tablet, 0.5rem);
    }
}

@media screen and (min-width: 1080px) {
    .event {
        --event-padding: var(--event-padding-desktop);
        --event-border-radius: var(--event-border-radius-desktop);
        --gap: var(--event-gap-desktop);
        --grid-areas: var(--event-grid-areas-desktop);
        --grid-columns: var(--event-grid-columns-desktop);
        --grid-rows: var(--event-grid-rows-desktop);
        --dates-top-spacing: var(--event-dates-top-spacing-desktop, 0.5rem);
        --tags-top-spacing: var(--event-tags-top-spacing-desktop, 0.5rem);
        --headline-top-spacing: var(--event-headline-top-spacing-desktop, 0.5rem);
        --body-top-spacing: var(--event-body-top-spacing-desktop, 0.5rem);
        --image-top-spacing: var(--event-image-top-spacing-desktop, 0.5rem);
        --buttons-top-spacing: var(--event-buttons-top-spacing-desktop, 0.5rem);
    }
}

@container (max-width: 767px) {
    .event {
        --event-padding: var(--event-padding-mobile);
        --event-border-radius: var(--event-border-radius-mobile);
        --gap: var(--event-gap-mobile);
        --grid-areas: var(--event-grid-areas-mobile);
        --grid-columns: var(--event-grid-columns-mobile);
        --grid-rows: var(--event-grid-rows-mobile);
        --dates-top-spacing: var(--event-dates-top-spacing-mobile, 0.5rem);
        --tags-top-spacing: var(--event-tags-top-spacing-mobile, 0.5rem);
        --headline-top-spacing: var(--event-headline-top-spacing-mobile, 0.5rem);
        --body-top-spacing: var(--event-body-top-spacing-mobile, 0.5rem);
        --image-top-spacing: var(--event-image-top-spacing-mobile, 0.5rem);
        --buttons-top-spacing: var(--event-buttons-top-spacing-mobile, 0.5rem);
    }
}

@container (min-width: 768px) and (max-width: 1023px) {
    .event {
        --event-padding: var(--event-padding-tablet);
        --event-border-radius: var(--event-border-radius-tablet);
        --gap: var(--event-gap-tablet);
        --grid-areas: var(--event-grid-areas-tablet);
        --grid-columns: var(--event-grid-columns-tablet);
        --grid-rows: var(--event-grid-rows-tablet);
        --dates-top-spacing: var(--event-dates-top-spacing-tablet, 0.5rem);
        --tags-top-spacing: var(--event-tags-top-spacing-tablet, 0.5rem);
        --headline-top-spacing: var(--event-headline-top-spacing-tablet, 0.5rem);
        --body-top-spacing: var(--event-body-top-spacing-tablet, 0.5rem);
        --image-top-spacing: var(--event-image-top-spacing-tablet, 0.5rem);
        --buttons-top-spacing: var(--event-buttons-top-spacing-tablet, 0.5rem);
    }
}

@container (min-width: 1024px) {
    .event {
        --event-padding: var(--event-padding-desktop);
        --event-border-radius: var(--event-border-radius-desktop);
        --gap: var(--event-gap-desktop);
        --grid-areas: var(--event-grid-areas-desktop);
        --grid-columns: var(--event-grid-columns-desktop);
        --grid-rows: var(--event-grid-rows-desktop);
        --dates-top-spacing: var(--event-dates-top-spacing-desktop, 0.5rem);
        --tags-top-spacing: var(--event-tags-top-spacing-desktop, 0.5rem);
        --headline-top-spacing: var(--event-headline-top-spacing-desktop, 0.5rem);
        --body-top-spacing: var(--event-body-top-spacing-desktop, 0.5rem);
        --image-top-spacing: var(--event-image-top-spacing-desktop, 0.5rem);
        --buttons-top-spacing: var(--event-buttons-top-spacing-desktop, 0.5rem);
    }
}

.event .event__dates {
    grid-area: dates;
    padding: var(--event-dates-padding, 0.5rem);
    margin-top: var(--dates-top-spacing, 0.5rem);
}

.event .event__tags {
    grid-area: tags;
    padding: var(--event-tags-padding, 0.5rem);
    margin-top: var(--tags-top-spacing, 0.5rem);
}

.event .event__headline {
    grid-area: headline;
    padding: var(--event-headline-padding, 0.5rem);
    margin-top: var(--headline-top-spacing, 0.5rem);
    max-width: 720px;
    hyphens: auto;
}

.event .event__body {
    grid-area: body;
    padding: var(--event-body-padding, 0.5rem);
    margin-top: var(--body-top-spacing, 0.5rem);
    max-width: 720px;
    hyphens: auto;
}

.event .event__image {
    display: grid;
    grid-area: image;
    padding: var(--event-image-padding, 0.5rem);
    margin-top: var(--image-top-spacing, 0.5rem);
    height: auto;
}

.event .event__image picture,
.event .event__image img {
    --image-aspect-ratio: var(--event-image-aspect-ratio);
    height: auto;
    transform: scale(1);
}

.event .event__buttons {
    grid-area: buttons;
    padding: var(--event-buttons-padding, 0.5rem);
    gap: var(--event-buttons-gap, 0.5rem);
    margin-top: var(--buttons-top-spacing, 0.5rem);
}

.event.clickable a {
    position: static;
}

.event.clickable a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
}

.event.clickable:hover picture > img {
    transform: scale(1.05);
}

.event:hover {
    --background: var(--background-hover);
    --foreground: var(--foreground-hover);
    --shadow: var(--shadow-hover);
}

nav > ul,
.navigation > ul {
    --list-padding: 0;
    --list-margin: 0;
    --list-nested-margin: 0;
    display: flex;
    flex-direction: var(--direction, row);
    flex-wrap: wrap;
    gap: var(--gap, var(--navigation-gap, 20px));
}

nav .navigation__item,
.navigation .navigation__item {
    --list-item-margin-bottom: 0;
    --list-unsorted-item-padding-left-level-1: 0;
    --list-unsorted-item-padding-left-level-2: 0;
    width: auto;
    padding: 0;
    margin: 0;
}

nav .navigation__item::marker,
nav .navigation__item::before,
.navigation .navigation__item::marker,
.navigation .navigation__item::before {
    display: none;
    content: "";
}

nav.horizontal,
.navigation.horizontal {
    --direction: row;
}

nav.vertical,
.navigation.vertical {
    --direction: column;
}

.site-navigation {
    background: var(--site-navigation-background, transparent);
    color: var(--foreground);
    padding: var(--site-navigation-padding, 0);
    border-style: var(--site-navigation-border-style, none);
    border-width: var(--site-navigation-border-width, 0);
    border-color: var(--site-navigation-border-color, transparent);
    border-radius: var(--site-navigation-border-radius, 0);
    box-shadow: var(--site-navigation-box-shadow, none);
    height: var(--site-navigation-height);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.site-navigation__container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: var(--site-navigation-justify-content, space-between);
    gap: var(--site-navigation-container-gap, 0);
    position: relative;
    padding: 0;
}

.site-navigation__slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-navigation__slot .layout.flexible {
    width: auto;
    --layout-flexible-align-items: center;
}

.site-navigation__slot--1,
.site-navigation__slot--2,
.site-navigation__slot--3,
.site-navigation__slot--4 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-navigation__slot--1:empty,
.site-navigation__slot--2:empty,
.site-navigation__slot--3:empty,
.site-navigation__slot--4:empty {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-navigation__slot--1 {
    flex: var(--site-navigation-slot-1-flex, 0 0 auto);
    justify-content: var(--site-navigation-slot-1-justify-content, flex-start);
    --layout-flexible-justify-content: var(--site-navigation-slot-1-justify-content, flex-start);
}

.site-navigation__slot--2 {
    flex: var(--site-navigation-slot-2-flex, 0 0 auto);
    justify-content: var(--site-navigation-slot-2-justify-content, center);
    --layout-flexible-justify-content: var(--site-navigation-slot-2-justify-content, center);
}

.site-navigation__slot--3 {
    flex: var(--site-navigation-slot-3-flex, 0 0 auto);
    justify-content: var(--site-navigation-slot-3-justify-content, center);
    --layout-flexible-justify-content: var(--site-navigation-slot-3-justify-content, center);
}

.site-navigation__slot--4 {
    flex: var(--site-navigation-slot-4-flex, 0 0 auto);
    justify-content: var(--site-navigation-slot-4-justify-content, flex-end);
    --layout-flexible-justify-content: var(--site-navigation-slot-4-justify-content, flex-end);
}

.site-navigation nav.navigation > ul {
    gap: var(--site-navigation-nav-gap, 0);
}

@media screen and (max-width: 767px) {
    .site-navigation {
        --site-navigation-padding: var(--site-navigation-padding-mobile, 0);
        --site-navigation-height: var(--site-navigation-height-mobile, auto);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .site-navigation {
        --site-navigation-padding: var(--site-navigation-padding-tablet, 0);
        --site-navigation-height: var(--site-navigation-height-tablet, auto);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    .site-navigation {
        --site-navigation-padding: var(--site-navigation-padding-desktop, 0);
        --site-navigation-height: var(--site-navigation-height-desktop, auto);
    }
}

@media screen and (min-width: 1440px) {
    .site-navigation {
        --site-navigation-padding: var(--site-navigation-padding-wide, 0);
        --site-navigation-height: var(--site-navigation-height-wide, auto);
    }
}

.site-header {
    background: var(--site-header-background, transparent);
    color: var(--foreground);
    padding: var(--site-header-padding, 0);
    border-style: var(--site-header-border-style, none);
    border-width: var(--site-header-border-width, 0);
    border-color: var(--site-header-border-color, transparent);
    border-radius: var(--site-header-border-radius, 0);
    box-shadow: var(--site-header-box-shadow, none);
    height: var(--site-header-height);
    display: flex;
    align-items: center;
}

.site-header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    padding: 0;
}

.site-header__logo a {
    display: block;
}

.site-header__logo a svg {
    --foreground: var(--site-header-logo-color, inherit);
    height: 100%;
    width: max-content;
    max-height: 100%;
    max-width: 100%;
}

.site-header__logo .logo-mobile,
.site-header__logo .logo-tablet,
.site-header__logo .logo-desktop {
    display: none;
}

.site-header__logo .logo-mobile {
    display: block;
}

.site-header__logo .logo-mobile,
.site-header__logo .logo-mobile > svg,
.site-header__logo .logo-mobile > img {
    width: var(--site-header-logo-width-mobile, auto);
    height: var(--site-header-logo-height-mobile, 44px);
}

.site-header__logo .logo-tablet,
.site-header__logo .logo-tablet > svg,
.site-header__logo .logo-tablet > img {
    width: var(--site-header-logo-width-tablet, auto);
    height: var(--site-header-logo-height-tablet, 32px);
}

.site-header__logo .logo-desktop,
.site-header__logo .logo-desktop > svg,
.site-header__logo .logo-desktop > img {
    width: var(--site-header-logo-width-desktop, auto);
    height: var(--site-header-logo-height-desktop, 32px);
}

.site-header__menu nav.navigation {
    --navigation-gap: var(--site-header-menu-items-gap, 4px);
}

.site-header__search .form-control.input:not(:focus-within, :focus, :focus-visible) {
    --form-control-input-background: var(--site-header-search-background, inherit);
    --form-control-input-border: var(--site-header-search-border, inherit);
    --form-control-input-placeholder-color: var(--site-header-search-placeholder-color, inherit);
}

.site-header__search .form-control.input:not(:focus-within, :focus, :focus-visible) svg {
    --foreground: var(--site-header-search-icon-color, inherit);
}

.site-header__search .form-control.input:not(:focus-within, :focus, :focus-visible) [class*=button] {
    --background: var(--site-header-search-button-background, inherit);
    --foreground: var(--site-header-search-button-foreground, inherit);
    padding: var(--site-header-search-button-padding, 0);
}

.site-header__search .form-control.input:not(:focus-within, :focus, :focus-visible) input {
    color: var(--site-header-search-foreground, inherit);
}

.site-header__search .form-control.input:focus-within,
.site-header__search .form-control.input:focus,
.site-header__search .form-control.input:focus-visible {
    --form-control-input-background: var(--site-header-search-background-focus, inherit);
    --form-control-input-border: var(--site-header-search-border-focus, inherit);
    --form-control-input-placeholder-color: var(--site-header-search-placeholder-color-focus, inherit);
}

.site-header__search .form-control.input:focus-within svg,
.site-header__search .form-control.input:focus svg,
.site-header__search .form-control.input:focus-visible svg {
    --foreground: var(--site-header-search-icon-color-focus, inherit);
}

.site-header__search .form-control.input:focus-within [class*=button],
.site-header__search .form-control.input:focus [class*=button],
.site-header__search .form-control.input:focus-visible [class*=button] {
    --background: var(--site-header-search-button-background-focus, var(--site-header-search-button-background));
    --foreground: var(--site-header-search-button-foreground-focus, var(--site-header-search-button-foreground));
    padding: var(--site-header-search-button-padding-focus, var(--site-header-search-button-padding));
}

.site-header__search .form-control.input:focus-within input,
.site-header__search .form-control.input:focus input,
.site-header__search .form-control.input:focus-visible input {
    color: var(--site-header-search-foreground-focus, inherit);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--site-header-actions-gap, 4px);
}

.site-header__actions button {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
}

.site-header__menu-toggle {
    display: none;
}

.site-header__menu-toggle .navigation .navigation__item > a[class*=button]:not(:hover),
.site-header__menu-toggle > a[class*=button]:not(:hover),
.site-header__menu .navigation .navigation__item > a[class*=button]:not(:hover),
.site-header__menu > a[class*=button]:not(:hover),
.site-header__actions .navigation .navigation__item > a[class*=button]:not(:hover),
.site-header__actions > a[class*=button]:not(:hover) {
    --background: var(--site-header-button-background, inherit) !important;
    --foreground: var(--site-header-button-foreground, inherit) !important;
}

.site-header__menu-toggle .navigation .navigation__item > a[class*=button]:hover,
.site-header__menu-toggle > a[class*=button]:hover,
.site-header__menu .navigation .navigation__item > a[class*=button]:hover,
.site-header__menu > a[class*=button]:hover,
.site-header__actions .navigation .navigation__item > a[class*=button]:hover,
.site-header__actions > a[class*=button]:hover {
    --background: var(--site-header-button-background-hover, inherit) !important;
    --foreground: var(--site-header-button-foreground-hover, inherit) !important;
}

/* Responsivita */
@media (max-width: 1279px) {
    .site-header {
        --site-header-height: var(--site-header-height-mobile, 72px);
    }

    .site-header__container {
        justify-content: space-between;
    }

    .site-header__menu,
    .site-header__search {
        display: none;
    }

    .site-header__menu-toggle {
        display: block;
    }

    .site-header__logo {
        order: var(--site-header-logo-position-mobile, 2);
    }

    .site-header__menu {
        order: var(--site-header-menu-position-mobile, 1);
    }

    .site-header__menu-toggle {
        order: var(--site-header-menu-toggle-position-mobile, 1);
    }

    .site-header__search {
        order: var(--site-header-search-position-mobile, 3);
    }

    .site-header__actions {
        order: var(--site-header-actions-position-mobile, 4);
    }
}

@media (min-width: 1280px) {
    .site-header {
        --site-header-height: var(--site-header-height-tablet, 72px);
    }

    .site-header__logo .logo-tablet {
        display: block;
    }

    .site-header__logo .logo-mobile,
    .site-header__logo .logo-desktop {
        display: none;
    }

    .site-header__logo {
        order: var(--site-header-logo-position-tablet, 1);
    }

    .site-header__menu {
        order: var(--site-header-menu-position-tablet, 2);
    }

    .site-header__menu-toggle {
        order: var(--site-header-menu-toggle-position-tablet, 2);
    }

    .site-header__search {
        order: var(--site-header-search-position-tablet, 3);
    }

    .site-header__actions {
        order: var(--site-header-actions-position-tablet, 4);
    }
}

@media screen and (min-width: 1440px) {
    .site-header {
        --site-header-height: var(--site-header-height-desktop, 72px);
    }

    .site-header__logo .logo-desktop {
        display: block;
    }

    .site-header__logo .logo-mobile,
    .site-header__logo .logo-tablet {
        display: none;
    }

    .site-header__logo {
        order: var(--site-header-logo-position-desktop, 1);
    }

    .site-header__menu {
        order: var(--site-header-menu-position-desktop, 2);
    }

    .site-header__menu-toggle {
        order: var(--site-header-menu-toggle-position-desktop, 2);
    }

    .site-header__search {
        order: var(--site-header-search-position-desktop, 3);
    }

    .site-header__actions {
        order: var(--site-header-actions-position-desktop, 4);
    }
}

.site-footer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    background: var(--site-footer-background, transparent);
    padding: var(--site-footer-padding, 0);
    border: var(--site-footer-border, none);
    border-radius: var(--site-footer-border-radius, 0);
    box-shadow: var(--site-footer-box-shadow, none);
    gap: var(--site-footer-gap, 24px);
    width: 100%;
    /* Mobile */
    /* Tablet */
    /* Desktop */
}

.site-footer * {
    --foreground: var(--site-footer-foreground, inherit);
}

.site-footer a.logo svg {
    width: var(--site-footer-logo-width, auto);
    height: var(--site-footer-logo-height, auto);
}

@media screen and (max-width: 767px) {
    .site-footer {
        --site-footer-padding: var(--site-footer-padding-mobile, 0);
        --site-footer-gap: var(--site-footer-gap-mobile, 0);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .site-footer {
        --site-footer-padding: var(--site-footer-padding-tablet, 0);
        --site-footer-gap: var(--site-footer-gap-tablet, 0);
    }
}

@media screen and (min-width: 1080px) {
    .site-footer {
        --site-footer-padding: var(--site-footer-padding-desktop, 0);
        --site-footer-gap: var(--site-footer-gap-desktop, 0);
    }
}

.layout.paging {
    --column-gap: var(--paging-column-gap, 0);
    --width: fit-content;
    width: var(--paging-width, auto);
    overflow: hidden;
    align-self: center;
    justify-self: center;
    background: var(--paging-background, transparent);
    color: var(--paging-foreground, inherit);
    border-radius: var(--paging-border-radius, 8px);
    border: var(--paging-border, none);
    padding: var(--paging-padding, 0);
    margin: var(--paging-margin, 0 auto);
}

.layout.paging .icon-button,
.layout.paging .box-button {
    --border-radius: var(--paging-button-border-radius, 0);
}

.layout.paging .icon-button:not(:last-child, .active),
.layout.paging .box-button:not(:last-child, .active) {
    border-right: var(--paging-button-border-separator, none);
}

.paging-dots {
    --column-gap: var(--paging-dots-column-gap, var(--spacing-md, 7px));
    --flexible-col-size: var(--paging-dot-width);
    display: inline-flex;
    width: max-content;
    align-self: center;
    justify-self: center;
    padding: var(--paging-dots-padding, 0);
    border-radius: var(--paging-dots-radius, 0);
    border: var(--paging-dots-border, none);
    background: var(--paging-dots-background, inherit);
    box-shadow: var(--paging-dots-box-shadow, none);
}

.paging-dots > .dot {
    display: inline-flex;
    box-sizing: border-box;
    min-width: var(--paging-dot-width, 8px);
    min-height: var(--paging-dot-height, 8px);
    background: var(--paging-dot-background, rgba(0, 0, 0, 0.2));
    border-radius: 9999px;
    transition: var(--paging-dot-transition, min-width 0.3s ease, background 0.3s ease);
}

.paging-dots > .dot[active],
.paging-dots > .dot:active,
.paging-dots > .dot.active,
.paging-dots > .dot.tns-nav-active {
    --paging-dot-background: var(--paging-dot-background-active, rgba(0, 0, 0, 0.90));
    --paging-dot-width: var(--paging-dot-width-active, 24px);
}

.paging-arrows {
    --column-gap: var(--paging-arrows-column-gap, var(--spacing-lg, 16px));
    --layout-flexible-align-items: center;
    --layout-flexible-justify-content: center;
    --flexible-col-size: var(--button-large-height);
    display: inline-flex;
    width: max-content;
    align-self: center;
    justify-self: center;
    align-items: center;
    gap: var(--column-gap);
    padding: var(--paging-arrows-padding, 0);
    border-radius: var(--paging-arrows-radius, 0);
    border: var(--paging-arrows-border, none);
    background: var(--paging-arrows-background, inherit);
    box-shadow: var(--paging-arrows-box-shadow, none);
}

.paging-arrows .paging-arrows__counter {
    --foreground: var(--paging-arrows-counter-color, inherit);
    display: flex;
    align-items: center;
    justify-self: center;
    justify-content: center;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.paging-arrows .icon-button.brand,
.paging-arrows .icon-button.bw,
.paging-arrows .icon-button.inverse {
    --flexible-col-size: var(--button-large-height);
    --background: var(--paging-arrows-button-background, transparent);
    --foreground: var(--paging-arrows-button-foreground, inherit);
    --border: var(--paging-arrows-button-border, none);
}

.paging-arrows .icon-button.brand:not([disabled]):hover,
.paging-arrows .icon-button.bw:not([disabled]):hover,
.paging-arrows .icon-button.inverse:not([disabled]):hover {
    --background: var(--paging-arrows-button-background-hover, rgba(0, 0, 0, 0.05));
    --foreground: var(--paging-arrows-button-foreground-hover, inherit);
    --border: var(--paging-arrows-button-border-hover, none);
}

.paging-arrows .icon-button.brand:not([disabled]):active,
.paging-arrows .icon-button.bw:not([disabled]):active,
.paging-arrows .icon-button.inverse:not([disabled]):active {
    --background: var(--paging-arrows-button-background-active, rgba(0, 0, 0, 0.1));
    --foreground: var(--paging-arrows-button-foreground-active, inherit);
    --border: var(--paging-arrows-button-border-active, none);
}

.paging-arrows .icon-button.brand[disabled],
.paging-arrows .icon-button.bw[disabled],
.paging-arrows .icon-button.inverse[disabled] {
    --background: var(--paging-arrows-button-background-disabled, transparent);
    --foreground: var(--paging-arrows-button-foreground-disabled, rgba(0, 0, 0, 0.3));
    --border: var(--paging-arrows-button-border-disabled, none);
    cursor: not-allowed;
}

.button-group {
    --column-gap-mobile: var(--button-group-gap);
    --row-gap-mobile: var(--button-group-gap);
    --column-gap-desktop: var(--button-group-gap);
    --row-gap-desktop: var(--button-group-gap);
    box-sizing: border-box;
    width: var(--button-group-width, max-content);
    height: max-content;
    padding: var(--button-group-padding, inherit);
    background: var(--button-group-background, inherit);
    color: var(--button-group-foreground, inherit);
    border: var(--button-group-border, inherit);
    border-radius: var(--button-group-border-radius, inherit);
    box-shadow: var(--button-group-shadow, inherit);
    overflow: hidden;
}

.button-group:not(:focus, :focus-within, :focus-visible) {
    overflow: hidden;
}

.button-group > .separator {
    display: block;
    box-sizing: border-box;
    height: auto;
    width: auto;
    border-right: var(--button-group-horizontal-separator, inherit);
}

.button-group > a {
    --background: var(--button-background, inherit);
    --foreground: var(--button-foreground, inherit);
    --border: var(--button-border, inherit);
    --border-radius: var(--button-border-radius, inherit) !important;
}

.button-group.vertical {
    --flexible-direction: column;
}

.button-group.vertical > .separator {
    display: block;
    box-sizing: border-box;
    --flexible-col-size: auto;
    height: auto;
    border-bottom: var(--button-group-vertical-separator, inherit);
}

.button-group.vertical > a {
    width: 100%;
    height: min-content;
    justify-content: var(--button-group-vertical-link-justify-content, space-between);
}

@media screen and (max-width: 768px) {
    .button-group.horizontal {
        --flexible-direction: column;
        width: 100%;
    }

    .button-group.horizontal > .separator {
        --flexible-col-size: max-content;
        display: block;
        box-sizing: border-box;
        height: auto;
        border-bottom: var(--button-group-horizontal-separator, inherit);
    }

    .button-group.horizontal > a {
        width: 100%;
        height: min-content;
    }
}

.button-group.style-default {
    --button-group-padding: var(--button-group-default-padding, inherit);
    --button-group-background: var(--button-group-default-background, inherit);
    --button-group-foreground: var(--button-group-default-foreground, inherit);
    --button-group-border: var(--button-group-default-border, inherit);
    --button-group-border-radius: var(--button-group-default-border-radius, inherit);
    --button-group-shadow: var(--button-group-default-shadow, inherit);
    --button-group-horizontal-separator: var(--button-group-horizontal-default-separator, inherit);
    --button-group-vertical-separator: var(--button-group-vertical-default-separator, inherit);
    --button-group-gap: var(--button-group-default-gap, inherit);
    --button-background: var(--button-group-default-button-background, inherit);
    --button-foreground: var(--button-group-default-button-foreground, inherit);
    --button-border: var(--button-group-default-button-border, inherit);
    --button-border-radius: var(--button-group-default-button-border-radius, inherit);
}

.button-group.style-default a:hover {
    --button-background: var(--button-group-default-button-background-hover, inherit);
    --button-foreground: var(--button-group-default-button-foreground-hover, inherit);
    --button-border: var(--button-group-default-button-border-hover, inherit);
    --button-border-radius: var(--button-group-default-button-border-radius-hover, inherit);
}

.button-group.style-default a.active {
    --button-background: var(--button-group-default-button-background-active, inherit);
    --button-foreground: var(--button-group-default-button-foreground-active, inherit);
    --button-border: var(--button-group-default-button-border-active, inherit);
    --button-border-radius: var(--button-group-default-button-border-radius-active, inherit);
}

.button-group.style-alt-a {
    --button-group-padding: var(--button-group-alt-a-padding, inherit);
    --button-group-background: var(--button-group-alt-a-background, inherit);
    --button-group-foreground: var(--button-group-alt-a-foreground, inherit);
    --button-group-border: var(--button-group-alt-a-border, inherit);
    --button-group-border-radius: var(--button-group-alt-a-border-radius, inherit);
    --button-group-shadow: var(--button-group-alt-a-shadow, inherit);
    --button-group-horizontal-separator: var(--button-group-horizontal-alt-a-separator, inherit);
    --button-group-vertical-separator: var(--button-group-vertical-alt-a-separator, inherit);
    --button-group-gap: var(--button-group-alt-a-gap, inherit);
    --button-background: var(--button-group-alt-a-button-background, inherit);
    --button-foreground: var(--button-group-alt-a-button-foreground, inherit);
    --button-border: var(--button-group-alt-a-button-border, inherit);
    --button-border-radius: var(--button-group-alt-a-button-border-radius, inherit);
}

.button-group.style-alt-a a:hover {
    --button-background: var(--button-group-alt-a-button-background-hover, inherit);
    --button-foreground: var(--button-group-alt-a-button-foreground-hover, inherit);
    --button-border: var(--button-group-alt-a-button-border-hover, inherit);
    --button-border-radius: var(--button-group-alt-a-button-border-radius-hover, inherit);
}

.button-group.style-alt-a a.active {
    --button-background: var(--button-group-alt-a-button-background-active, inherit);
    --button-foreground: var(--button-group-alt-a-button-foreground-active, inherit);
    --button-border: var(--button-group-alt-a-button-border-active, inherit);
    --button-border-radius: var(--button-group-alt-a-button-border-radius-active, inherit);
}

.button-group.style-alt-b {
    --button-group-padding: var(--button-group-alt-b-padding, inherit);
    --button-group-background: var(--button-group-alt-b-background, inherit);
    --button-group-foreground: var(--button-group-alt-b-foreground, inherit);
    --button-group-border: var(--button-group-alt-b-border, inherit);
    --button-group-border-radius: var(--button-group-alt-b-border-radius, inherit);
    --button-group-shadow: var(--button-group-alt-b-shadow, inherit);
    --button-group-horizontal-separator: var(--button-group-horizontal-alt-b-separator, inherit);
    --button-group-vertical-separator: var(--button-group-vertical-alt-b-separator, inherit);
    --button-group-gap: var(--button-group-alt-b-gap, inherit);
    --button-background: var(--button-group-alt-b-button-background, inherit);
    --button-foreground: var(--button-group-alt-b-button-foreground, inherit);
    --button-border: var(--button-group-alt-b-button-border, inherit);
    --button-border-radius: var(--button-group-alt-b-button-border-radius, inherit);
}

.button-group.style-alt-b a:hover {
    --button-background: var(--button-group-alt-b-button-background-hover, inherit);
    --button-foreground: var(--button-group-alt-b-button-foreground-hover, inherit);
    --button-border: var(--button-group-alt-b-button-border-hover, inherit);
    --button-border-radius: var(--button-group-alt-b-button-border-radius-hover, inherit);
}

.button-group.style-alt-b a.active {
    --button-background: var(--button-group-alt-b-button-background-active, inherit);
    --button-foreground: var(--button-group-alt-b-button-foreground-active, inherit);
    --button-border: var(--button-group-alt-b-button-border-active, inherit);
    --button-border-radius: var(--button-group-alt-b-button-border-radius-active, inherit);
}

.button-group.style-alt-c {
    --button-group-padding: var(--button-group-alt-c-padding, inherit);
    --button-group-background: var(--button-group-alt-c-background, inherit);
    --button-group-foreground: var(--button-group-alt-c-foreground, inherit);
    --button-group-border: var(--button-group-alt-c-border, inherit);
    --button-group-border-radius: var(--button-group-alt-c-border-radius, inherit);
    --button-group-shadow: var(--button-group-alt-c-shadow, inherit);
    --button-group-horizontal-separator: var(--button-group-horizontal-alt-c-separator, inherit);
    --button-group-vertical-separator: var(--button-group-vertical-alt-c-separator, inherit);
    --button-group-gap: var(--button-group-alt-c-gap, inherit);
    --button-background: var(--button-group-alt-c-button-background, inherit);
    --button-foreground: var(--button-group-alt-c-button-foreground, inherit);
    --button-border: var(--button-group-alt-c-button-border, inherit);
    --button-border-radius: var(--button-group-alt-c-button-border-radius, inherit);
}

.button-group.style-alt-c a:hover {
    --button-background: var(--button-group-alt-c-button-background-hover, inherit);
    --button-foreground: var(--button-group-alt-c-button-foreground-hover, inherit);
    --button-border: var(--button-group-alt-c-button-border-hover, inherit);
    --button-border-radius: var(--button-group-alt-c-button-border-radius-hover, inherit);
}

.button-group.style-alt-c a.active {
    --button-background: var(--button-group-alt-c-button-background-active, inherit);
    --button-foreground: var(--button-group-alt-c-button-foreground-active, inherit);
    --button-border: var(--button-group-alt-c-button-border-active, inherit);
    --button-border-radius: var(--button-group-alt-c-button-border-radius-active, inherit);
}

.button-group.style-alt-d {
    --button-group-padding: var(--button-group-alt-d-padding, inherit);
    --button-group-background: var(--button-group-alt-d-background, inherit);
    --button-group-foreground: var(--button-group-alt-d-foreground, inherit);
    --button-group-border: var(--button-group-alt-d-border, inherit);
    --button-group-border-radius: var(--button-group-alt-d-border-radius, inherit);
    --button-group-shadow: var(--button-group-alt-d-shadow, inherit);
    --button-group-horizontal-separator: var(--button-group-horizontal-alt-d-separator, inherit);
    --button-group-vertical-separator: var(--button-group-vertical-alt-d-separator, inherit);
    --button-group-gap: var(--button-group-alt-d-gap, inherit);
    --button-background: var(--button-group-alt-d-button-background, inherit);
    --button-foreground: var(--button-group-alt-d-button-foreground, inherit);
    --button-border: var(--button-group-alt-d-button-border, inherit);
    --button-border-radius: var(--button-group-alt-d-button-border-radius, inherit);
}

.button-group.style-alt-d a:hover {
    --button-background: var(--button-group-alt-d-button-background-hover, inherit);
    --button-foreground: var(--button-group-alt-d-button-foreground-hover, inherit);
    --button-border: var(--button-group-alt-d-button-border-hover, inherit);
    --button-border-radius: var(--button-group-alt-d-button-border-radius-hover, inherit);
}

.button-group.style-alt-d a.active {
    --button-background: var(--button-group-alt-d-button-background-active, inherit);
    --button-foreground: var(--button-group-alt-d-button-foreground-active, inherit);
    --button-border: var(--button-group-alt-d-button-border-active, inherit);
    --button-border-radius: var(--button-group-alt-d-button-border-radius-active, inherit);
}

.dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    overflow: hidden;
    background: var(--dropdown-list-background, white);
    border: var(--dropdown-list-border, none);
    border-radius: var(--dropdown-list-border-radius, 0);
    box-shadow: var(--dropdown-list-shadow, none);
    padding: var(--dropdown-list-padding, 0);
    max-height: var(--dropdown-list-max-height, 100vh);
    min-width: var(--dropdown-list-min-width, 200px);
}

.dropdown-list > .dropdown-list-items {
    --row-gap: var(--dropdown-list-row-gap, 1px);
    --columns-mobile: 1fr;
    --columns-tablet: 1fr;
    --columns-desktop: 1fr;
    --columns-wide: 1fr;
    --layout-columns-align-items: start;
    --layout-flex-direction: column;
    flex: 1 1 auto;
    align-content: start;
    overflow-y: auto;
    /* Accessibility for keyboard navigation */
    /* Ensure the scrollable area can receive focus */
}

.dropdown-list > .dropdown-list-items:focus,
.dropdown-list > .dropdown-list-items:focus-visible,
.dropdown-list > .dropdown-list-items:focus-within {
    box-shadow: var(--focus-ring-shadow) !important;
    outline: none;
}

.dropdown-list > .dropdown-list-items[tabindex] {
    cursor: default;
}

.dropdown-list .all-results-button-container {
    display: flex;
    place-content: center;
    padding: var(--dropdown-list-all-results-padding, 8px);
    background: var(--dropdown-list-all-results-background, var(--dropdown-item-background, white));
    border-top: var(--dropdown-list-all-results-delimeter, solid 1px #E9EAEB);
}

.dropdown-item {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dropdown-item-gap, 8px);
    width: auto;
    border-radius: var(--dropdown-item-border-radius, 6px);
    padding: var(--dropdown-item-padding, 8px 10px);
    background: var(--background, var(--dropdown-item-background, transparent));
    color: var(--foreground, var(--dropdown-item-foreground, inherit));
    height: var(--dropdown-item-height, auto);
    min-height: var(--dropdown-item-min-height, 40px);
}

.dropdown-item:not(:last-child) {
    border-bottom: var(--dropdown-item-delimeter, solid 1px #E9EAEB);
}

.dropdown-item .layout.flexible.layout--badge-set,
.dropdown-item .layout.flexible.badge-set {
    display: inline-flex;
}

.dropdown-item.clickable {
    cursor: pointer;
}

.dropdown-item.clickable:hover {
    --background: var(--dropdown-item-background-hover, inherit);
    --foreground: var(--dropdown-item-foreground-hover, inherit);
    --dropdown-item-prefix-color: var(--dropdown-item-prefix-color-hover, inherit);
    --dropdown-item-suffix-color: var(--dropdown-item-suffix-color-hover, inherit);
}

.dropdown-item .body {
    flex: 1 1 auto;
    max-width: 100%;
}

.dropdown-item .prefix,
.dropdown-item .suffix {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.dropdown-item .prefix {
    --foreground: var(--dropdown-item-prefix-color, inherit);
}

.dropdown-item .suffix {
    --foreground: var(--dropdown-item-suffix-color, inherit);
}

.dropdown-item.selected,
.dropdown-item[aria-selected=true] {
    --background: var(--dropdown-item-background-selected, inherit);
    --foreground: var(--dropdown-item-foreground-selected, inherit);
    --dropdown-item-prefix-color: var(--dropdown-item-prefix-color-selected, inherit);
    --dropdown-item-suffix-color: var(--dropdown-item-suffix-color-selected, inherit);
}

.dropdown-item.disabled,
.dropdown-item[aria-disabled=true] {
    --background: var(--dropdown-item-background-disabled, transparent);
    --foreground: var(--dropdown-item-foreground-disabled, inherit);
    cursor: not-allowed;
}

.dropdown-item.disabled .prefix,
.dropdown-item.disabled .suffix,
.dropdown-item[aria-disabled=true] .prefix,
.dropdown-item[aria-disabled=true] .suffix {
    --dropdown-item-prefix-color: var(--dropdown-item-prefix-color-disabled, inherit);
    --dropdown-item-suffix-color: var(--dropdown-item-suffix-color-disabled, inherit);
}

.product-set {
    --column-gap: var(--product-set-column-gap, 1rem);
    --row-gap: var(--product-set-row-gap, 1rem);
}

.product-set > .card.vertical {
    --card-image-padding: var(--product-set-card-image-padding, inherit);
    --card-image-border-radius: var(--product-set-card-image-border-radius, inherit);
    --card-image-container-border-radius: var(--product-set-card-image-border-radius, inherit);
    --card-vertical-image-border-radius: var(--product-set-card-image-border-radius, inherit);
}

.navigation-mobile {
    display: flex;
    flex-direction: column;
    padding: var(--navigation-mobile-padding, var(--spacing-md, 0));
    gap: var(--navigation-mobile-gap, var(--spacing-sm, 0));
    background: var(--navigation-mobile-background, var(--background-style-light, white));
    min-height: 100vh;
}

.navigation-mobile header {
    display: flex;
    flex-direction: column;
    gap: var(--navigation-mobile-header-gap, var(--spacing-xs, 0));
    padding: var(--navigation-mobile-header-padding, 0);
}

.navigation-mobile footer {
    display: flex;
    flex-direction: column;
    gap: var(--navigation-mobile-footer-gap, var(--spacing-xs, 0));
    padding: var(--navigation-mobile-footer-padding, 0);
}

.navigation-mobile nav {
    flex: 1 1 auto;
}

.navigation-mobile > .navigation > .navigation__list {
    padding: var(--navigation-mobile-menu-padding, 0);
    gap: var(--navigation-mobile-menu-gap, var(--spacing-sm, 0));
}

.navigation-mobile > .navigation > .navigation__list .navigation__submenu {
    display: none;
    padding: var(--navigation-mobile-submenu-padding, 0);
    gap: var(--navigation-mobile-submenu-gap, var(--spacing-xs, 0));
}

.navigation-mobile > .navigation > .navigation__list [aria-expanded=true]:not(:hover) {
    --background: var(--navigation-mobile-submenu-button-background, inherit);
}

.navigation-mobile > .navigation > .navigation__list [aria-expanded=true] > svg {
    transform: rotate(180deg);
}

.navigation-mobile > .navigation > .navigation__list [aria-expanded=true] + .navigation__submenu {
    display: flex;
    flex-direction: column;
}

.navigation-mobile > .navigation > .navigation__list [aria-expanded=true] + .navigation__submenu > a {
    transform: rotate(90deg);
}

.navigation-mobile #search > *,
.navigation-mobile #search > * a,
.navigation-mobile .navigation__item,
.navigation-mobile .navigation__item a {
    flex: 1 0 auto;
    width: var(--navigation-mobile-button-width, 100%);
    justify-content: space-between;
}

.navigation-mobile #search > * ul,
.navigation-mobile .navigation__item ul {
    --list-padding: 0;
    --list-margin: 0;
    --list-nested-margin: 0;
    padding: var(--navigation-mobile-submenu-padding, 0);
    margin: var(--navigation-mobile-submenu-margin, 0);
    gap: var(--navigation-mobile-submenu-gap, var(--spacing-xs, 0));
}

.navigation-mobile #search > * ul > li,
.navigation-mobile .navigation__item ul > li {
    --list-item-margin-bottom: 0;
    --list-unsorted-item-padding-left-level-1: 0;
    --list-unsorted-item-padding-left-level-2: 0;
    width: auto;
    padding: 0;
    margin: 0;
}

.navigation-mobile #search > * ul > li::marker,
.navigation-mobile .navigation__item ul > li::marker {
    display: none;
    content: "";
}

.navigation-mobile #search > * ul > li > a,
.navigation-mobile .navigation__item ul > li > a {
    --submenuitem-margin-left: var(--navigation-mobile-submenuitem-margin-left, 20px);
    margin-left: var(--submenuitem-margin-left);
    width: calc(100% - var(--submenuitem-margin-left));
}

.chat {
    display: flex;
    flex-direction: column;
    gap: var(--chat-gap, 1em);
    padding: var(--chat-padding, 0);
    background: var(--chat-background, inherit);
    border: var(--chat-border, inherit);
    border-radius: var(--chat-border-radius, inherit);
    box-shadow: var(--chat-box-shadow, none);
    overflow: hidden;
}

.chat {
    width: 100%;
    max-width: var(--chat-max-width, 720px);
}

.chat .chat-message {
    column-gap: var(--chat-column-gap, 12px);
    row-gap: var(--chat-row-gap, 12px);
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 479px) {
    .chat .chat-message {
        flex-direction: column;
    }
}

.chat .chat-message .avatar,
.chat .chat-message > *:first-child {
    flex-shrink: 0;
    flex-basis: auto;
}

.chat .chat-message .chat-bubble {
    display: block;
    position: relative;
    flex: 1 1 auto;
    margin: var(--chat-bubble-margin, 0);
    padding: var(--chat-bubble-padding, inherit);
    border-radius: var(--chat-bubble-border-radius, inherit);
    box-shadow: var(--chat-bubble-box-shadow, none);
    border: var(--chat-bubble-border, none);
    background: var(--chat-bubble-background, inherit);
    --foreground: var(--chat-bubble-foreground, inherit);
}

.chat .chat-message:nth-child(odd) .chat-bubble {
    --chat-bubble-margin: var(--chat-bubble-odd-margin, inherit);
    --chat-bubble-padding: var(--chat-bubble-odd-padding, inherit);
    --chat-bubble-border-radius: var(--chat-bubble-odd-border-radius, inherit);
    --chat-bubble-box-shadow: var(--chat-bubble-odd-box-shadow, inherit);
    --chat-bubble-border: var(--chat-bubble-odd-border, inherit);
    --chat-bubble-background: var(--chat-bubble-odd-background, inherit);
    --chat-bubble-foreground: var(--chat-bubble-odd-foreground, inherit);
}

.chat .chat-message:nth-child(even) .chat-bubble {
    --chat-bubble-margin: var(--chat-bubble-even-margin, inherit);
    --chat-bubble-padding: var(--chat-bubble-even-padding, inherit);
    --chat-bubble-border-radius: var(--chat-bubble-even-border-radius, inherit);
    --chat-bubble-box-shadow: var(--chat-bubble-even-box-shadow, inherit);
    --chat-bubble-border: var(--chat-bubble-even-border, inherit);
    --chat-bubble-background: var(--chat-bubble-even-background, inherit);
    --chat-bubble-foreground: var(--chat-bubble-even-foreground, inherit);
}

.slider {
    display: flex;
    flex-direction: column;
    gap: var(--slider-gap, 40px);
    padding: var(--slider-padding, 0.5rem);
    width: 100%;
    max-width: 100%;
}

.slider__slides {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--slider-slide-padding, 0);
    gap: var(--slider-slide-gap, 40px);
    min-width: 100%;
    scrollbar-width: none;
    /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbar for IE and Edge */
}

.slider__slides::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar for Chrome, Safari, and Opera */
}

.slider__slides > * {
    min-width: 100%;
    gap: var(--slider-slide-gap, 40px);
    display: flex;
    place-content: center;
}

.tiles,
.layout--tiles {
    --column-gap-mobile: var(--layout-tiles-column-gap-mobile, 32px);
    --row-gap-mobile: var(--layout-tiles-row-gap-mobile, 32px);
    --column-gap-desktop: var(--layout-tiles-column-gap-desktop, 32px);
    --row-gap-desktop: var(--layout-tiles-row-gap-desktop, 32px);
    --grid-column-gap-mobile: var(--column-gap-mobile);
    --grid-row-gap-mobile: var(--row-gap-mobile);
    --grid-column-gap-desktop: var(--column-gap-desktop);
    --grid-row-gap-desktop: var(--row-gap-desktop);
}

.tiles > .tile,
.layout--tiles > .tile {
    width: 100%;
    max-width: 100%;
}

.cookies-banner {
    --background: var(--cookies-banner-background);
    --foreground: var(--cookies-banner-foreground);
    --padding: var(--cookies-banner-padding, 0);
    --border: var(--cookies-banner-border, none);
    --border-radius: var(--cookies-banner-border-radius, inherit);
    --shadow: var(--cookies-banner-box-shadow, none);
    --width: var(--cookies-banner-width, 80vw);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--cookies-banner-gap, var(--spacing-large));
    margin-inline: auto;
    background: var(--background);
    color: var(--foreground);
    padding: var(--padding);
    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: var(--width);
}

.cookies-banner > svg {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.cookies-banner .body {
    flex: 1 1 auto;
    width: 100%;
    max-width: max-content;
}

.cookies-banner .layout--button-set {
    --width: max-content;
    flex-shrink: 1;
    flex-grow: 1;
    justify-self: flex-end;
}

@media screen and (max-width: 767px) {
    .cookies-banner {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .cookies-banner .close-btn {
        position: absolute;
        top: 2em;
        right: 2em;
        z-index: 10;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .cookies-banner .button-set {
        flex-direction: column;
    }
}

.cookie-banner-wrap {
    display: none;
}

.cookie-banner-wrap.cookie-banner-wrap--active {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 48px;
    z-index: 9999;
    display: block;
}

.cookies-settings {
    --background: var(--cookies-banner-background);
    --foreground: var(--cookies-banner-foreground);
    --padding: var(--cookies-banner-padding, 24px);
    --border: var(--cookies-banner-border, none);
    --border-radius: var(--cookies-banner-border-radius, inherit);
    --shadow: var(--cookies-banner-box-shadow, none);
    --width: var(--cookies-banner-width, 80vw);
    display: none;
    align-items: center;
    justify-content: flex-start;
    gap: var(--cookies-banner-gap, 24px);
    margin-inline: auto;
    background: var(--background);
    color: var(--foreground);
    padding: var(--padding);
    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: var(--max-content-width);
    max-width: 100%;
    max-height: 95%;
}

.is-cookies-settings-open .cookies-settings {
    display: flex;
    min-height: 100vh;
    margin: 0 auto;
}

.cookies-settings > .wrapper {
    width: 100%;
}

.cookies-settings .cookie-type {
    --column-gap: 12px;
    --row-gap: 12px;
    --flexible-direction: row;
    flex-wrap: nowrap;
    padding: 24px;
    border-radius: 16px;
}

@media screen and (max-width: 767px) {
    .cookies-settings .cookie-type {
        --flexible-direction: column;
    }
}

.cookies-settings .cookie-type prs-switch {
    --flexible-col-size: max-content;
}

.cookies-settings .cookie-type[aria-required=true] {
    background: #f5f5f5;
}

.cookies-settings .layout.button-set {
    --flexible-direction: row;
}

.cookies-settings .accordion-group {
    --flexible-col-size: 100%;
}

.cookies-settings .accordion-group .accordion-item {
    --accordion-item-heading-padding: 0;
    --accordion-item-border: none;
    --accordion-item-border-expanded: none;
    --accordion-item-box-shadow: none;
    --accordion-item-box-shadow-expanded: none;
    --accordion-item-border-radius: 0;
    --accordion-item-heading-padding-hover: 0;
    --accordion-item-border-hover: none;
    --accordion-item-box-shadow-hover: none;
    --accordion-item-border-radius-hover: 0;
    --accordion-item-body-padding: 16px 0 0 0;
}

.layout.heading {
    --row-gap: 24px;
    --layout-flexible-justify-content: space-between;
    --layout-flexible-align-items: center;
    --p-margin-bottom-desktop: 0;
    --p-margin-bottom-mobile: 0;
}

.layout.heading .heading__headline > *:last-child {
    margin-bottom: 0;
}

.card.banner {
    --card-border-radius: var(--banner-border-radius, 0);
    --card-default-border-radius: var(--banner-border-radius, 0);
    --card-default-gap: 0;
}

.card.banner .card__image {
    border-radius: 0;
    --card-image-container-border-radius: 0;
    --card-image-border-radius: 0;
}

.card.banner .card__image picture,
.card.banner .card__image picture img {
    object-fit: cover;
    border-radius: 0;
}

.rating {
    position: relative;
    display: inline-block;
    width: max-content;
}

.rating .rating__stars {
    position: relative;
    display: inline-block;
    line-height: 1;
    height: auto;
    width: auto;
    font-size: 1.5rem;
}

.rating .rating__stars .stars-bg,
.rating .rating__stars .stars-fg {
    display: flex;
    gap: 0;
    position: relative;
    flex-shrink: 0;
}

.rating .rating__stars .stars-bg {
    fill: var(--star-empty-color, #d1d1d1);
    color: var(--star-empty-color, #d1d1d1);
    z-index: 1;
}

.rating .rating__stars .stars-fg {
    color: var(--star-full-color, #f5b301);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
    min-width: 0;
    width: var(--value, 0);
}

.rating .rating__stars .stars-fg .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.rating .rating__stars .star {
    width: var(--star-size, 20px);
    height: var(--star-size, 20px);
    display: inline-block;
    flex-shrink: 0;
    place-content: center;
}

.rating .rating__stars .star > * {
    width: var(--star-size, 20px);
    height: var(--star-size, 20px);
}

section.announcement {
    --padding-block: var(--announcement-padding-block, 16px);
    --padding-inline: var(--announcement-padding-inline, 24px);
    --background: var(--announcement-background, transparent);
    --foreground: var(--announcement-foreground, var(--text-color, #000));
    --layout-flexible-align-items: center;
    --border: var(--announcement-border, none);
    --border-radius: var(--announcement-border-radius, 0);
    --shadow: var(--announcement-box-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
    --max-content-width: 100%;
    margin: var(--announcement-margin, 0);
}

section.announcement .layout {
    --column-gap: var(--announcement-column-gap, 16px);
    --row-gap: var(--announcement-row-gap, 16px);
    --width: 100%;
}

section.announcement .announcement__content {
    flex: 1;
}

section.announcement .announcement__content .layout.apply-margins {
    margin: 0;
}

section.announcement--default {
    --announcement-background: var(--announcement-default-background, #f6f6f6);
    --announcement-foreground: var(--announcement-default-foreground, #000);
    --announcement-border: var(--announcement-default-border, none);
    --announcement-box-shadow: var(--announcement-default-box-shadow, none);
}

section.announcement--success {
    --announcement-background: var(--announcement-success-background, #ecfdf3);
    --announcement-foreground: var(--announcement-success-foreground, #000);
    --announcement-border: var(--announcement-success-border, none);
    --announcement-box-shadow: var(--announcement-success-box-shadow, none);
}

section.announcement--warning {
    --announcement-background: var(--announcement-warning-background, #fffaeb);
    --announcement-foreground: var(--announcement-warning-foreground, #000);
    --announcement-border: var(--announcement-warning-border, none);
    --announcement-box-shadow: var(--announcement-warning-box-shadow, none);
}

section.announcement--danger {
    --announcement-background: var(--announcement-danger-background, #fef3f2);
    --announcement-foreground: var(--announcement-danger-foreground, #000);
    --announcement-border: var(--announcement-danger-border, none);
    --announcement-box-shadow: var(--announcement-danger-box-shadow, none);
}

figure.video-component {
    display: flex;
    flex-direction: column;
    gap: var(--video-component-gap, 16px);
    width: 100%;
    height: auto;
    object-fit: cover;
    overflow: hidden;
    border-radius: 0;
}

.post {
    position: relative;
    overflow: hidden;
    background: var(--background, var(--post-background, transparent));
    border: var(--post-border, solid 1px var(--border, #e0e0e0));
    border-radius: var(--post-border-radius, var(--box-border-radius, 0));
    box-shadow: var(--post-shadow, none);
    padding: var(--post-padding, 0);
    transition: all 0.15s ease-in-out;
    height: 100%;
}

.post * {
    color: var(--foreground, var(--post-foreground, inherit));
}

.post a.link {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
}

.post:hover img {
    transform: scale(1.02);
}

.post .wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    max-width: 100%;
}

.post header,
.post footer,
.post .body {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.post header {
    padding: var(--post-header-padding, 1em);
    gap: var(--post-header-gap, 0.5em);
    flex: 1;
}

.post .body {
    padding: var(--post-body-padding, 0);
    gap: var(--post-body-gap, 1em);
}

.post footer {
    padding: var(--post-footer-padding, 1em);
    gap: var(--post-footer-gap, 0.5em);
}

.post picture,
.post img,
.post figure.picture {
    --image-border-radius: var(--post-image-border-radius, 0);
}

.post .controls {
    --column-gap: var(--post-controls-gap, 1em);
    --row-gap: var(--post-controls-gap, 1em);
}

.lightbox {
    --padding-top: var(--lightbox-padding-desktop-top);
    --padding-bottom: var(--lightbox-padding-desktop-bottom);
    --padding-left: var(--lightbox-padding-desktop-left);
    --padding-right: var(--lightbox-padding-desktop-right);
    --vertical-padding: calc(var(--padding-top) + var(--padding-bottom));
    --horizontal-padding: calc(var(--padding-left) + var(--padding-right));
    --lightbox-padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
    --bottom-caption-height: var(--lightbox-bottom-caption-height, 96px);
    --paging-dot-background: var(--lightbox-paging-dot-color, rgba(255, 255, 255, 0.25));
    --paging-dot-background-active: var(--lightbox-paging-dot-active-color, #ffffff);
    --paging-arrows-counter-color: var(--lightbox-paging-arrows-counter-color, #ffffff);
    --paging-arrows-button-background: var(--lightbox-paging-arrows-button-background, transparent);
    --paging-arrows-button-foreground: var(--lightbox-paging-arrows-button-foreground, inherit);
    --paging-arrows-button-border: var(--lightbox-paging-arrows-button-border, none);
    --paging-arrows-button-background-hover: var(--lightbox-paging-arrows-button-background-hover, white);
    --paging-arrows-button-foreground-hover: var(--lightbox-paging-arrows-button-foreground-hover, black);
    --paging-arrows-button-border-hover: var(--lightbox-paging-arrows-button-border-hover, none);
    --max-image-height: calc(100vh - (var(--vertical-padding)));
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--lightbox-padding);
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

.lightbox__content {
    max-width: calc(100vw - (var(--horizontal-padding)));
    max-height: 100%;
    width: 100%;
    height: 100%;
    display: flex;
}

.lightbox__content picture,
.lightbox__content figure.picture {
    max-width: calc(100vw - var(--horizontal-padding));
    margin: 0;
    width: auto;
    height: auto;
    margin: auto !important;
}

.lightbox__content picture,
.lightbox__content picture img,
.lightbox__content figure.picture,
.lightbox__content figure.picture img {
    max-height: var(--max-image-height);
}

.lightbox__content picture figcaption,
.lightbox__content figure.picture figcaption {
    height: 100%;
    max-height: var(--max-image-height);
    overflow-y: auto;
}

.lightbox__content picture[class^=description-position--bottom] figcaption,
.lightbox__content figure.picture[class^=description-position--bottom] figcaption {
    max-height: var(--bottom-caption-height);
    overflow-y: auto;
}

.lightbox__close-button {
    position: absolute;
    top: 18px;
    right: 26px;
}

.lightbox--slider {
    --max-image-height: calc(100vh - var(--vertical-padding) - var(--button-large-height) - var(--slider-gap));
}

@media screen and (max-width: 767px) {
    .lightbox {
        --padding-top: var(--lightbox-padding-mobile-top);
        --padding-bottom: var(--lightbox-padding-mobile-bottom);
        --padding-left: var(--lightbox-padding-mobile-left);
        --padding-right: var(--lightbox-padding-mobile-right);
    }

    .lightbox__content picture,
    .lightbox__content figure.picture img {
        max-height: calc(var(--max-image-height) - var(--bottom-caption-height) - var(--image-row-gap));
    }

    .lightbox figcaption {
        height: auto;
        min-height: var(--bottom-caption-height);
        overflow-y: auto;
    }
}

.stats {
    --span-mobile: 4;
    --span-tablet: 6;
    --span-desktop: 3;
    --span-wide: 3;
    width: 100%;
    min-width: 100%;
}

.stats .stat {
    display: flex;
    flex-direction: column;
    gap: var(--statistics-stat-gap, 12px);
}

.stats .stat__value {
    --foreground: var(--statistics-value-color, inherit);
}

.stats .stat__label {
    display: flex;
    flex-direction: column;
    gap: var(--statistics-stat-label-gap, 4px);
    --foreground: var(--statistics-label-color, inherit);
}

.stats .stat__label * {
    margin: 0;
}

.stats .stat__description {
    --foreground: var(--statistics-description-color, inherit);
}

.stats--black {
    --statistics-value-color: var(--statistics-black-value-color, var(--color-brand-600, inherit));
    --statistics-label-color: var(--statistics-black-label-color, var(--color-fg-black, black));
    --statistics-description-color: var(--statistics-black-description-color, var(--color-neutral-600, #666));
}

.stats--white {
    --statistics-value-color: var(--statistics-white-value-color, rgba(255, 255, 255, 0.70));
    --statistics-label-color: var(--statistics-white-label-color, white);
    --statistics-description-color: var(--statistics-white-description-color, rgba(255, 255, 255, 0.80));
}

.audio-player {
    --foreground: var(--audio-player-color, var(--text-color, black));
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--audio-player-gap, 24px);
    width: 100%;
    min-height: var(--audio-player-min-height, 180px);
    padding: var(--audio-player-padding, 20px 24px);
    border-radius: var(--audio-player-border-radius, var(--card-border-radius, 16px));
    background: var(--audio-player-background, linear-gradient(135deg, #a8b4e8 0%, #d4bce8 100%));
    overflow: hidden;
    box-sizing: border-box;
}

.audio-player audio {
    display: none;
}

.audio-player__header {
    display: flex;
    flex-direction: column;
    gap: var(--audio-player-header-gap, 4px);
}

.audio-player__time {
    font-size: var(--text-sm-font-size-mobile, 14px);
    line-height: var(--text-sm-line-height-mobile, 1.55);
    font-weight: 400;
    opacity: 0.85;
}

.audio-player__title {
    display: block;
    font-size: var(--text-lg-font-size-mobile, 18px);
    line-height: var(--text-lg-line-height-mobile, 1.6);
    font-weight: 600;
    margin: 0;
}

.audio-player__subtitle {
    display: block;
    font-size: var(--text-lg-font-size-mobile, 18px);
    line-height: var(--text-lg-line-height-mobile, 1.6);
    font-weight: 700;
    margin: 0;
    opacity: 0.9;
}

.audio-player__play-btn {
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--audio-player-btn-size, 52px);
    height: var(--audio-player-btn-size, 52px);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--audio-player-btn-background, rgba(255, 255, 255, 0.28));
    color: var(--audio-player-btn-color, #ffffff);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.audio-player__play-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.audio-player__play-btn:hover {
    background: var(--audio-player-btn-background-hover, rgba(255, 255, 255, 0.42));
}

.audio-player__play-btn:active {
    transform: scale(0.94);
}

.audio-player__play-btn:focus,
.audio-player__play-btn:focus-visible,
.audio-player__play-btn:focus-within {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 3px;
}

/* Forms & controls */
.form {
    --padding: var(--form-padding, 32px);
    width: var(--width);
    max-width: 100%;
}

.form--fill {
    --width: 100%;
}

.form--narrow {
    --width: var(--form-width-narrow, 480px);
}

.form form {
    display: flex;
    flex-direction: column;
    gap: var(--form-gap, 24px);
    width: 100%;
}

.form form .form-control {
    width: 100%;
}

.form-control.input {
    display: inline-flex;
    flex-direction: column;
    width: var(--form-control-input-width, auto);
}

.form-control.input > .body {
    height: var(--form-control-input-height, auto);
    align-items: center;
    font-family: var(--form-control-input-font-family, var(--font-family-sans));
    font-size: var(--form-control-input-font-size, var(--text-md-font-size));
    line-height: var(--form-control-input-line-height, var(--text-md-line-height));
    gap: var(--form-control-input-body-gap, var(--spacing-x-small));
    padding: var(--form-control-input-body-padding, var(--spacing-x-small) var(--spacing-small));
    border-radius: var(--form-control-input-border-radius, 0);
    border: var(--form-control-input-border, solid 1px rgba(0, 0, 0, 0.12));
    background: var(--form-control-input-background);
    color: var(--form-control-input-color);
    box-shadow: var(--form-control-input-shadow, none);
}

.form-control.input > .body input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    color: inherit;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    font: inherit;
}

.form-control.input > .body input::placeholder {
    color: var(--form-control-input-placeholder-color, rgba(0, 0, 0, 0.54));
}

.form-control.input > .body .prefix {
    color: var(--form-control-input-prefix-color, rgba(0, 0, 0, 0.54));
}

.form-control.input > .body .suffix {
    color: var(--form-control-input-suffix-color, rgba(0, 0, 0, 0.54));
}

.form-control.input[aria-invalid=true] .body {
    --form-control-input-border: var(--form-control-input-invalid-border, solid 1px rgba(255, 0, 0, 0.54));
    --form-control-input-shadow: var(--form-control-input-invalid-shadow, 0 0 0 1px rgba(255, 0, 0, 0.54));
    --form-control-input-background: var(--form-control-input-invalid-background);
    --form-control-input-color: var(--form-control-input-invalid-color);
}

.form-control.input[aria-disabled=true] .body {
    --form-control-input-border: var(--form-control-input-disabled-border, solid 1px rgba(255, 0, 0, 0.54));
    --form-control-input-shadow: var(--form-control-input-disabled-shadow, 0 0 0 1px rgba(255, 0, 0, 0.54));
    --form-control-input-background: var(--form-control-input-disabled-background);
    --form-control-input-color: var(--form-control-input-disabled-color);
}

.form-control.textarea {
    display: inline-flex;
    flex-direction: column;
    --form-control-body-width: 400px;
}

.form-control.textarea > label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-control.textarea .body {
    font-family: var(--form-control-input-font-family, var(--font-family-sans));
    font-size: var(--form-control-input-font-size, var(--text-md-font-size));
    line-height: var(--form-control-input-line-height, var(--text-md-line-height));
    padding: var(--form-control-input-body-padding, var(--spacing-x-small) var(--spacing-small));
    border-radius: var(--form-control-input-border-radius, 0);
    border: var(--form-control-input-border, solid 1px rgba(0, 0, 0, 0.12));
    background: var(--form-control-input-background);
    color: var(--form-control-input-color);
    box-shadow: var(--form-control-input-shadow, none);
    width: 100%;
}

.form-control.textarea .body textarea {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    color: inherit;
    font: inherit;
}

.form-control.textarea .body textarea::placeholder {
    color: var(--form-control-input-placeholder-color, rgba(0, 0, 0, 0.54));
}

.form-control.textarea .body .prefix {
    color: var(--form-control-input-prefix-color, rgba(0, 0, 0, 0.54));
}

.form-control.textarea .body .suffix {
    color: var(--form-control-input-suffix-color, rgba(0, 0, 0, 0.54));
}

.form-control.textarea .body .help-icon {
    color: var(--form-control-input-help-icon-color, rgba(0, 0, 0, 0.54));
}

.form-control.textarea[aria-invalid=true] .body {
    --form-control-input-border: var(--form-control-input-invalid-border, solid 1px rgba(255, 0, 0, 0.54));
    --form-control-input-shadow: var(--form-control-input-invalid-shadow, 0 0 0 1px rgba(255, 0, 0, 0.54));
    --form-control-input-background: var(--form-control-input-invalid-background);
    --form-control-input-color: var(--form-control-input-invalid-color);
}

.form-control.textarea[aria-disabled=true] .body {
    --form-control-input-border: var(--form-control-input-disabled-border, solid 1px rgba(255, 0, 0, 0.54));
    --form-control-input-shadow: var(--form-control-input-disabled-shadow, 0 0 0 1px rgba(255, 0, 0, 0.54));
    --form-control-input-background: var(--form-control-input-disabled-background);
    --form-control-input-color: var(--form-control-input-disabled-color);
}

.form-control.radio-button {
    --size: var(--radio-button-size, 24px);
    --indicator-size: var(--radio-button-indicator-size, calc(var(--size) * 0.5));
    --border-radius: var(--radio-button-border-radius, var(--border-radius-full));
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap, var(--radio-button-gap, 8px));
}

.form-control.radio-button,
.form-control.radio-button label,
.form-control.radio-button input[type=radio] {
    cursor: pointer;
}

.form-control.radio-button input[type=radio] {
    -webkit-appearance: none;
    appearance: none;
    min-width: var(--size);
    min-height: var(--size);
    max-width: var(--size);
    max-height: var(--size);
    border-radius: var(--border-radius);
    display: grid;
    place-content: center;
    border: var(--border, var(--radio-button-border, solid 1px var(--foreground-style-dark-alt, #000)));
    background: var(--background, var(--radio-button-background, #fff));
}

.form-control.radio-button input[type=radio]::before {
    content: "";
    width: var(--indicator-size);
    height: var(--indicator-size);
    border-radius: var(--border-radius);
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background: var(--indicator-color, var(--foreground-style-accent-alt, #000));
}

.form-control.radio-button input[type=radio]:hover {
    --border: var(--radio-button-border-hover, inherit);
    --background: var(--radio-button-background-hover, inherit);
}

.form-control.radio-button input[type=radio]:checked {
    --border: var(--radio-button-border-checked, solid 1px var(--foreground-style-accent));
    --background: var(--radio-button-background-checked, inherit);
}

.form-control.radio-button input[type=radio]:checked::before {
    --indicator-color: var(--radio-button-indicator-color, var(--foreground-style-accent-alt));
    transform: scale(1);
}

.form-control.radio-button input[type=radio]:checked:hover {
    --border: var(--radio-button-border-checked-hover, inherit);
    --background: var(--radio-button-background-checked-hover, inherit);
}

.form-control.radio-button input[type=radio]:checked:hover::before {
    --indicator-color: var(--radio-button-indicator-color-hover, inherit);
}

.form-control.radio-button input[type=radio]:disabled:checked,
.form-control.radio-button input[type=radio]:disabled::before,
.form-control.radio-button input[type=radio]:disabled:hover:checked,
.form-control.radio-button input[type=radio]:disabled:hover::before {
    cursor: not-allowed;
    --border: var(--radio-button-border-disabled, solid 1px #aaa);
    --background: var(--radio-button-background-disabled, inherit);
    --indicator-color: var(--radio-button-indicator-color-disabled, #aaa);
}

.form-control.radio-button.disabled,
.form-control.radio-button.disabled label,
.form-control.radio-button.disabled label > *,
.form-control.radio-button.disabled input[type=radio] {
    cursor: not-allowed;
    --foreground: var(--radio-button-foreground-disabled, #aaa);
}

.form-control.checkbox {
    --size: var(--checkbox-size, 24px);
    --indicator-size: var(--checkbox-indicator-size, 20px);
    --gap: var(--checkbox-gap, 8px);
    --background: var(--checkbox-background, transparent);
    --border: var(--checkbox-border, solid 1px rgba(0, 0, 0, 0.25));
    --border-radius: var(--checkbox-border-radius, .25rem);
    --indicator-color: var(--checkbox-indicator-color, white);
    --checked-icon: var(--checkbox-checked-icon, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.285 6.707l-11.285 11.285-5.285-5.285 1.414-1.414 3.871 3.871 9.871-9.871z"/></svg>'));
    --indeterminate-icon: var(--checkbox-indeterminate-icon, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><rect x="5" y="11" width="14" height="2"/></svg>'));
    --border-hover: var(--checkbox-border-hover, solid 1px var(--foreground-style-dark));
    --background-hover: var(--checkbox-background-hover, inherit);
    --border-checked: var(--checkbox-border-checked, solid 1px var(--foreground-style-accent));
    --background-checked: var(--checkbox-background-checked, var(--foreground-style-accent));
    --border-checked-hover: var(--checkbox-border-checked-hover, solid 1px var(--foreground-style-accent-dark));
    --background-checked-hover: var(--checkbox-background-checked-hover, var(--background-checked));
    --indicator-color-hover: var(--indicator-color);
    --border-disabled: var(--checkbox-border-disabled, solid 1px var(--foreground-disabled));
    --background-disabled: var(--checkbox-background-disabled, transparent);
    --indicator-color-disabled: var(--checkbox-indicator-color-disabled, var(--foreground-disabled));
    --foreground-disabled: var(--checkbox-foreground-disabled, lightgray);
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap);
}

.form-control.checkbox,
.form-control.checkbox label,
.form-control.checkbox input[type=checkbox] {
    cursor: pointer;
}

.form-control.checkbox input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    min-width: var(--size);
    min-height: var(--size);
    max-width: var(--size);
    max-height: var(--size);
    display: grid;
    place-content: center;
    background: var(--background);
    border: var(--border);
    border-radius: var(--border-radius);
}

.form-control.checkbox input[type=checkbox]::before {
    content: "";
    width: var(--indicator-size);
    height: var(--indicator-size);
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    -webkit-mask: var(--checked-icon);
    mask: var(--checked-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    background-color: transparent;
}

.form-control.checkbox input[type=checkbox]:hover {
    --border: var(--border-hover);
    --background: var(--background-hover);
}

.form-control.checkbox input[type=checkbox]:checked {
    --border: var(--border-checked);
    --background: var(--background-checked);
}

.form-control.checkbox input[type=checkbox]:checked::before {
    transform: scale(1);
    background-color: var(--indicator-color);
}

.form-control.checkbox input[type=checkbox]:checked:hover {
    --border: var(--border-checked-hover);
    --background: var(--background-checked-hover);
}

.form-control.checkbox input[type=checkbox]:checked:hover::before {
    --indicator-color: var(--indicator-color-hover);
}

.form-control.checkbox input[type=checkbox]:indeterminate {
    --border: var(--border-checked);
    --background: var(--background-checked);
}

.form-control.checkbox input[type=checkbox]:indeterminate::before {
    transform: scale(1);
    -webkit-mask: var(--indeterminate-icon);
    mask: var(--indeterminate-icon);
    background-color: var(--indicator-color);
}

.form-control.checkbox input[type=checkbox]:indeterminate:hover {
    --border: var(--border-checked-hover);
    --background: var(--background-checked-hover);
}

.form-control.checkbox input[type=checkbox]:indeterminate:hover::before {
    --indicator-color: var(--indicator-color-hover);
}

.form-control.checkbox input[type=checkbox]:disabled,
.form-control.checkbox input[type=checkbox]:disabled:checked,
.form-control.checkbox input[type=checkbox]:disabled:indeterminate,
.form-control.checkbox input[type=checkbox]:disabled::before,
.form-control.checkbox input[type=checkbox]:disabled:hover,
.form-control.checkbox input[type=checkbox]:disabled:hover:checked,
.form-control.checkbox input[type=checkbox]:disabled:hover:indeterminate,
.form-control.checkbox input[type=checkbox]:disabled:hover::before {
    cursor: not-allowed;
    --border: var(--border-disabled);
    --background: var(--background-disabled);
    --indicator-color: var(--indicator-color-disabled);
}

.form-control.checkbox.disabled,
.form-control.checkbox.disabled label,
.form-control.checkbox.disabled label > *,
.form-control.checkbox.disabled input[type=checkbox] {
    cursor: not-allowed;
    --foreground: var(--foreground-disabled);
}

.form-control.dropdown {
    position: relative;
}

.form-control.dropdown[aria-readonly=true] .body,
.form-control.dropdown[aria-readonly=true] input {
    cursor: pointer;
}

.form-control.dropdown .suffix {
    cursor: pointer;
}

.form-control.dropdown.opened .dropdown-menu {
    display: block;
}

.form-control.dropdown.opened > .body > .suffix {
    transform: rotate(180deg);
}

.form-control.dropdown.opened > .supporting-text {
    visibility: hidden;
}

.form-control.dropdown .dropdown-list {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--dropdown-list-top-position, 0);
    left: 0;
    z-index: 1000;
    width: var(--dropdown-list-width, inherit);
    max-height: var(--dropdown-list-max-height, 240px);
    overflow-y: auto;
    background: var(--dropdown-list-background, white);
    border: var(--dropdown-list-border, solid 1px rgba(0, 0, 0, 0.12));
    box-shadow: var(--dropdown-list-shadow, 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04));
    border-radius: var(--dropdown-list-border-radius, var(--form-control-input-border-radius, 0));
    padding: var(--dropdown-list-padding, 0);
}

.form-control {
    display: flex;
    flex-direction: var(--form-control-flex-direction, column);
    gap: var(--form-control-gap, 8px);
    max-width: 100%;
}

.form-control > label {
    font-family: var(--form-control-label-font-family, var(--font-family-sans));
    font-size: var(--form-control-label-font-size, var(--text-sm-font-size));
    font-weight: var(--form-control-label-font-weight, var(--font-weight-medium));
    line-height: var(--form-control-label-line-height, var(--text-sm-line-height));
    letter-spacing: var(--form-control-label-letter-spacing, var(--letter-spacing-normal));
    color: var(--foreground, var(--form-control-label-color));
    text-transform: var(--form-control-label-text-transform, none);
}

.form-control > label .help-icon {
    display: flex;
}

.form-control > .body {
    overflow: hidden;
    position: relative;
    display: flex;
    width: var(--form-control-body-width, auto);
    min-width: 0;
    max-width: 100%;
}

.form-control > .body > .separator {
    display: block;
    width: 1px;
    height: 999px;
    outline: none;
    background: var(--form-control-input-divider-color, rgb(0, 0, 0));
}

.form-control > .body .prefix,
.form-control > .body .suffix {
    height: 100%;
}

.form-control > .body .prefix,
.form-control > .body .suffix,
.form-control > .body .help-icon {
    --foreground: var(--form-control-help-icon-color, var(--text-color));
    display: flex;
    align-items: center;
}

.form-control > .body .prefix .link-button,
.form-control > .body .prefix .box-button,
.form-control > .body .suffix .link-button,
.form-control > .body .suffix .box-button,
.form-control > .body .help-icon .link-button,
.form-control > .body .help-icon .box-button {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 100%;
}

.form-control > .body .prefix .link-button:hover span,
.form-control > .body .prefix .box-button:hover span,
.form-control > .body .suffix .link-button:hover span,
.form-control > .body .suffix .box-button:hover span,
.form-control > .body .help-icon .link-button:hover span,
.form-control > .body .help-icon .box-button:hover span {
    text-decoration: none;
}

.form-control > .supporting-text {
    font-family: var(--form-control-supporting-text-font-family, var(--font-family-sans));
    font-size: var(--form-control-supporting-text-font-size, var(--text-md-font-size));
    font-weight: var(--form-control-supporting-text-font-weight, var(--font-weight-regular));
    line-height: var(--form-control-supporting-text-line-height, var(--text-md-line-height));
    color: var(--foreground, var(--form-control-supporting-text-color, rgba(0, 0, 0, 0.54)));
}

.form-control:focus-within > .body {
    border: var(--focus-ring-border, inherit);
    box-shadow: var(--focus-ring-shadow, inherit);
}

.form-control[aria-invalid=true] .supporting-text {
    color: var(--form-control-supporting-text-invalid-color, red);
}

/* Menu */
.sub-menu {
    --background: var(--sub-menu-background, inherit);
    --border: var(--sub-menu-border, solid 1px #ccc);
    --shadow: var(--sub-menu-shadow, none);
    --border-radius: var(--sub-menu-border-radius, 16px);
    --padding: var(--sub-menu-padding, 48px);
    --max-width: var(--sub-menu-max-width, 1664px);
    --margin: var(--sub-menu-margin, 0 auto);
    --items-padding: var(--sub-menu-item-padding, 12px);
    background: var(--background);
    border: var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    padding: var(--padding);
    width: var(--max-width);
    max-width: 100%;
    margin: var(--margin);
}

.sub-menu.grid {
    --column-gap: var(--sub-menu-column-gap, 24px);
    --row-gap: var(--sub-menu-row-gap, 24px);
    --min-col-size: var(--sub-menu-min-column-size, 350px);
    --max-col-count: var(--sub-menu-max-column-count, 4);
}

.sub-menu.grid .grid {
    min-width: 100%;
    --padding: 0;
    --border: none;
}

.sub-menu .box {
    --background: var(--sub-menu-signpost-item-background, var(--signpost-item-background, transparent));
    --foreground: var(--sub-menu-signpost-item-foreground, var(--signpost-item-foreground, initial));
    --border: var(--sub-menu-signpost-item-border, var(--signpost-item-border, none));
    --border-radius: var(--sub-menu-signpost-item-border-radius, var(--signpost-item-border-radius, 0));
    --shadow: var(--sub-menu-signpost-item-box-shadow, var(--signpost-item-box-shadow, none));
    --padding: var(--items-padding);
    --p-margin-bottom-desktop: var(--sub-menu-signpost-item-p-margin-bottom, 12px);
    height: max-content;
}

.sub-menu .box:hover {
    --background: var(--sub-menu-signpost-item-background-hover, var(--signpost-item-hover-background, inherit));
    --foreground: var(--sub-menu-signpost-item-foreground-hover, var(--signpost-item-hover-foreground, inherit));
    --border: var(--sub-menu-signpost-item-hover-border, var(--signpost-item-hover-border, none));
    --shadow: var(--sub-menu-signpost-item-hover-box-shadow, var(--signpost-item-hover-box-shadow, none));
}

.sub-menu .box.active {
    --background: var(--sub-menu-signpost-item-background-active, var(--sub-menu-signpost-item-background-hover, inherit));
    --foreground: var(--sub-menu-signpost-item-foreground-active, var(--signpost-item-active-foreground, inherit));
    --border: var(--sub-menu-signpost-item-active-border, var(--signpost-item-active-border, none));
    --shadow: var(--sub-menu-signpost-item-active-box-shadow, var(--signpost-item-active-box-shadow, none));
}

.sub-menu .sub-menu-group {
    padding: var(--items-padding);
}

/* Molecules */
.accordion-item {
    --accordion-item-background: transparent;
    --accordion-item-box-shadow: none;
    --accordion-item-border: none;
    --accordion-item-border-width: none;
    --accordion-item-heading-color: inherit;
    --accordion-item-body-color: var(--accordion-item-heading-color, inherit);
    --accordion-item-numbering-color: var(--accordion-item-heading-color);
    counter-increment: numbering;
    border-radius: var(--accordion-item-border-radius, 0);
    padding: var(--accordion-item-padding, 0);
    background: var(--accordion-item-background);
    box-shadow: var(--accordion-item-box-shadow);
    border: var(--accordion-item-border);
    border-width: var(--accordion-item-border-width);
    transition: all 0.3s;
    overflow: hidden;
}

.accordion-item:not(:last-child) {
    margin-bottom: var(--accordion-spacing, var(--spacing-small, 0.5rem));
}

.accordion-item .accordion-item__heading {
    display: grid;
    grid-template-columns: auto max-content;
    align-items: center;
    position: relative;
    padding: var(--accordion-item-heading-padding);
    cursor: pointer;
}

.accordion-item .accordion-item__heading,
.accordion-item .accordion-item__heading * {
    --foreground: var(--accordion-item-heading-color);
    --p-margin-bottom-wide: 0;
    --p-margin-bottom-desktop: 0;
    --p-margin-bottom-tablet: 0;
    --p-margin-bottom-mobile: 0;
    transition: all 0.3s;
}

.accordion-item .accordion-item__heading svg {
    margin-left: 24px;
}

.accordion-item .accordion-item__body {
    display: none;
    opacity: 0;
    padding: var(--accordion-item-body-padding, var(--spacing-small, 0.5rem));
    --foreground: var(--accordion-item-body-color);
}

.accordion-item:hover {
    --accordion-item-background: var(--accordion-item-background-hover, inherit);
    --accordion-item-box-shadow: var(--accordion-item-box-shadow-hover, inherit);
    --accordion-item-border: var(--accordion-item-border-hover, inherit);
    --accordion-item-border-width: var(--accordion-item-border-width-hover, inherit);
    --accordion-item-heading-color: var(--accordion-item-heading-color-hover, inherit);
    --accordion-item-body-color: var(--accordion-item-body-color-hover, inherit);
    --accordion-item-numbering-color: var(--accordion-item-numbering-color-hover, inherit);
}

.accordion-item[aria-expanded=true] {
    --accordion-item-background: var(--accordion-item-background-expanded, inherit);
    --accordion-item-box-shadow: var(--accordion-item-box-shadow-expanded, inherit);
    --accordion-item-border: var(--accordion-item-border-expanded, inherit);
    --accordion-item-border-width: var(--accordion-item-border-width-expanded, inherit);
    --accordion-item-heading-color: var(--accordion-item-heading-color-expanded, inherit);
    --accordion-item-body-color: var(--accordion-item-body-color-expanded, inherit);
    --accordion-item-numbering-color: var(--accordion-item-numbering-color-expanded, inherit);
    height: auto;
}

.accordion-item[aria-expanded=true] .accordion-item__heading svg {
    transform: rotate(180deg);
}

.accordion-item[aria-expanded=true] .accordion-item__body {
    display: block;
    opacity: 1;
}

.accordion-item[aria-expanded=true]:hover {
    --accordion-item-background: var(--accordion-item-background-expanded-hover, inherit);
    --accordion-item-box-shadow: var(--accordion-item-box-shadow-expanded-hover, inherit);
    --accordion-item-border: var(--accordion-item-border-expanded-hover, inherit);
    --accordion-item-border-width: var(--accordion-item-border-width-expanded-hover, inherit);
    --accordion-item-heading-color: var(--accordion-item-heading-color-expanded-hover, inherit);
    --accordion-item-body-color: var(--accordion-item-body-color-expanded-hover, inherit);
    --accordion-item-numbering-color: var(--accordion-item-numbering-color-expanded-hover, inherit);
}

.accordion-item.numbered {
    --foreground: var(--accordion-item-numbering-color);
}

.accordion-item.numbered .accordion-item__heading {
    grid-template-columns: max-content auto max-content;
}

.accordion-item.numbered .accordion-item__heading *:first-child::before {
    content: counter(numbering) ".";
    margin-right: var(--accordion-item-numbering-margin);
    font-size: var(--accordion-item-numbering-font-size);
    font-weight: var(--accordion-item-numbering-font-weight);
    line-height: var(--accordion-item-numbering-line-height);
    align-self: baseline;
    color: var(--accordion-item-numbering-color, inherit);
}

.accordion-item--black {
    /* Black style */
    --accordion-item-border: var(--accordion-item-black-border);
    --accordion-item-border-width: var(--accordion-item-black-border-width);
    --accordion-item-background: var(--accordion-item-black-background);
    --accordion-item-box-shadow: var(--accordion-item-black-box-shadow);
    --accordion-item-heading-color: var(--accordion-item-black-heading-color);
    --accordion-item-numbering-color: var(--accordion-item-black-numbering-color);
    --accordion-item-body-color: var(--accordion-item-black-body-color);
    /* Black style - expanded */
    --accordion-item-border-expanded: var(--accordion-item-black-expanded-border);
    --accordion-item-border-width-expanded: var(--accordion-item-black-expanded-border-width);
    --accordion-item-background-expanded: var(--accordion-item-black-expanded-background);
    --accordion-item-box-shadow-expanded: var(--accordion-item-black-expanded-box-shadow);
    --accordion-item-heading-color-expanded: var(--accordion-item-black-expanded-heading-color);
    --accordion-item-numbering-color-expanded: var(--accordion-item-black-expanded-numbering-color);
    --accordion-item-body-color-expanded: var(--accordion-item-black-expanded-body-color);
    /* Black style :hover */
    --accordion-item-border-hover: var(--accordion-item-black-border-hover);
    --accordion-item-border-width-hover: var(--accordion-item-black-border-width-hover);
    --accordion-item-background-hover: var(--accordion-item-black-background-hover);
    --accordion-item-box-shadow-hover: var(--accordion-item-black-box-shadow-hover);
    --accordion-item-heading-color-hover: var(--accordion-item-black-heading-color-hover);
    --accordion-item-numbering-color-hover: var(--accordion-item-black-numbering-color-hover);
    --accordion-item-body-color-hover: var(--accordion-item-black-body-color-hover);
    /* Black style - expanded :hover */
    --accordion-item-border-expanded-hover: var(--accordion-item-black-expanded-border-hover);
    --accordion-item-border-width-expanded-hover: var(--accordion-item-black-expanded-border-width-hover);
    --accordion-item-background-expanded-hover: var(--accordion-item-black-expanded-background-hover);
    --accordion-item-box-shadow-expanded-hover: var(--accordion-item-black-expanded-box-shadow-hover);
    --accordion-item-heading-color-expanded-hover: var(--accordion-item-black-expanded-heading-color-hover);
    --accordion-item-numbering-color-expanded-hover: var(--accordion-item-black-expanded-numbering-color-hover);
    --accordion-item-body-color-expanded-hover: var(--accordion-item-black-expanded-body-color-hover);
}

.accordion-item--white {
    /* White style */
    --accordion-item-border: var(--accordion-item-white-border);
    --accordion-item-border-width: var(--accordion-item-white-border-width);
    --accordion-item-background: var(--accordion-item-white-background);
    --accordion-item-box-shadow: var(--accordion-item-white-box-shadow);
    --accordion-item-heading-color: var(--accordion-item-white-heading-color);
    --accordion-item-numbering-color: var(--accordion-item-white-numbering-color);
    --accordion-item-body-color: var(--accordion-item-white-body-color);
    /* White style - expanded */
    --accordion-item-border-expanded: var(--accordion-item-white-expanded-border);
    --accordion-item-border-width-expanded: var(--accordion-item-white-expanded-border-width);
    --accordion-item-background-expanded: var(--accordion-item-white-expanded-background);
    --accordion-item-box-shadow-expanded: var(--accordion-item-white-expanded-box-shadow);
    --accordion-item-heading-color-expanded: var(--accordion-item-white-expanded-heading-color);
    --accordion-item-numbering-color-expanded: var(--accordion-item-white-expanded-numbering-color);
    --accordion-item-body-color-expanded: var(--accordion-item-white-expanded-body-color);
    /* White style :hover */
    --accordion-item-border-hover: var(--accordion-item-white-border-hover);
    --accordion-item-border-width-hover: var(--accordion-item-white-border-width-hover);
    --accordion-item-background-hover: var(--accordion-item-white-background-hover);
    --accordion-item-box-shadow-hover: var(--accordion-item-white-box-shadow-hover);
    --accordion-item-heading-color-hover: var(--accordion-item-white-heading-color-hover);
    --accordion-item-numbering-color-hover: var(--accordion-item-white-numbering-color-hover);
    --accordion-item-body-color-hover: var(--accordion-item-white-body-color-hover);
    /* White style - expanded :hover */
    --accordion-item-border-expanded-hover: var(--accordion-item-white-expanded-border-hover);
    --accordion-item-border-width-expanded-hover: var(--accordion-item-white-expanded-border-width-hover);
    --accordion-item-background-expanded-hover: var(--accordion-item-white-expanded-background-hover);
    --accordion-item-box-shadow-expanded-hover: var(--accordion-item-white-expanded-box-shadow-hover);
    --accordion-item-heading-color-expanded-hover: var(--accordion-item-white-expanded-heading-color-hover);
    --accordion-item-numbering-color-expanded-hover: var(--accordion-item-white-expanded-numbering-color-hover);
    --accordion-item-body-color-expanded-hover: var(--accordion-item-white-expanded-body-color-hover);
}

.accordion-group {
    width: 100%;
}

.card {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap, 0);
    border-width: var(--card-border-width, 1px);
    border-style: var(--card-border-style, solid);
    border-color: var(--border-color, transparent);
    border-radius: var(--card-border-radius, 12px);
    background: var(--background, transparent);
    color: var(--foreground, inherit);
    box-shadow: var(--shadow, none);
    overflow: hidden;
    min-height: var(--min-height, var(--card-min-height, auto));
    height: var(--height, var(--card-height, max-content));
    width: 100%;
    padding: 0;
    --image-border-radius: 0;
}

.card.full-height {
    --height: auto;
    height: auto;
}

.card .card__image {
    box-sizing: border-box;
    flex-basis: var(--image-width, auto);
    width: var(--image-width, 100%);
    max-width: 100%;
    height: max-content;
    max-height: fit-content;
    object-fit: cover;
    padding: var(--image-padding, 0);
    background: transparent;
    overflow: hidden;
}

.card .card__body {
    color: var(--foreground, var(--text-color, inherit));
    background: transparent;
    box-sizing: border-box;
    display: block;
    padding: var(--body-padding, 0);
}

.card .card__body * {
    transition: all 0.3s ease;
}

.card .card__body a:not([class]) {
    text-decoration: none;
}

.card.horizontal {
    flex-direction: row;
}

.card.horizontal .card__image,
.card.horizontal .card__body {
    flex: 1 1 50%;
}

.card.horizontal .card__image > picture,
.card.horizontal .card__image > picture > img {
    max-width: 100%;
    width: var(--image-width, 100%);
    min-height: 100%;
}

.card.horizontal.full-size-image {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "image body";
    /* obrázek | body */
}

.card.horizontal.full-size-image .card__image {
    grid-area: image;
    width: 100%;
    height: 100%;
}

.card.horizontal.full-size-image .card__body {
    grid-area: body;
}

@media screen and (min-width: 768px) {
    .card.horizontal.full-size-image.reversed {
        grid-template-areas: "body image";
    }
}

@media screen and (max-width: 767px) {
    .card.horizontal.full-size-image {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: "image" "body";
    }

    .card.horizontal.full-size-image .card__image,
    .card.horizontal.full-size-image .card__body {
        flex: none;
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .card.horizontal.reversed {
        flex-direction: row-reverse;
    }
}

.card.horizontal.top {
    align-items: flex-start;
}

.card.horizontal.bottom {
    align-items: flex-end;
}

.card.horizontal.center {
    align-items: center;
}

@media screen and (max-width: 767px) {
    .card.horizontal {
        flex-direction: column;
    }

    .card.horizontal.center,
    .card.horizontal.top,
    .card.horizontal.bottom {
        align-items: flex-start;
    }

    .card.horizontal .card__image {
        height: auto;
    }
}

.card.vertical {
    flex-direction: column;
    gap: var(--gap, 0);
}

.card.vertical .card__body {
    flex: 1 1 auto;
    width: 100%;
}

.card.clickable {
    position: relative;
}

.card.clickable:hover .card__image img {
    transform: scale(1.03);
}

.card.clickable .card__body a.box-button,
.card.clickable .card__body a.link-button,
.card.clickable .card__body a.icon-button {
    position: static;
}

.card.clickable .card__body a.box-button::after,
.card.clickable .card__body a.link-button::after,
.card.clickable .card__body a.icon-button::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.card.image-padding,
.card.background--transparent.border--transparent {
    --image-border-radius: var(--card-image-border-radius, 12px);
}

@media screen and (min-width: 768px) {

    .card.background--transparent.border--transparent.horizontal .card__body,
    .card.background--transparent.border--transparent.horizontal.reversed .card__body {
        padding-top: 0;
        padding-bottom: 0;
    }

    .card.background--transparent.border--transparent.horizontal:not(.reversed) .card__body,
    .card.background--transparent.border--transparent.horizontal.reversed:not(.reversed) .card__body {
        padding-right: 0;
    }

    .card.background--transparent.border--transparent.horizontal.reversed .card__body,
    .card.background--transparent.border--transparent.horizontal.reversed.reversed .card__body {
        padding-left: 0;
    }
}

.card.background--transparent {
    --background: transparent;
}

.card.background--white-50 {
    --background: var(--color-white-50);
}

.card.background--white-100 {
    --background: var(--color-white-100);
}

.card.background--gray-light {
    --background: var(--color-gray-light);
}

.card.background--gray-solid {
    --background: var(--color-gray-solid);
}

.card.background--brand-light {
    --background: var(--color-brand-light);
}

.card.background--brand-solid {
    --background: var(--color-brand-solid);
}

.card.border--transparent {
    --border-color: transparent;
    border-style: hidden;
}

.card.border--white-50 {
    --border-color: var(--color-white-50);
}

.card.border--white-100 {
    --border-color: var(--color-white-100);
}

.card.border--gray-light {
    --border-color: var(--color-gray-light);
}

.card.border--gray-solid {
    --border-color: var(--color-gray-solid);
}

.card.border--brand-light {
    --border-color: var(--color-brand-light);
}

.card.border--brand-solid {
    --border-color: var(--color-brand-solid);
}

.card.foreground--black {
    --foreground: var(--color-fg-black);
}

.card.foreground--white {
    --foreground: var(--color-fg-white);
}

.card.horizontal {
    --image-padding: 0;
}

@media screen and (max-width: 767px) {

    .card.horizontal,
    .card.horizontal.reversed {
        --gap: var(--card-horizontal-gap-mobile);
        --image-padding: 0;
        --body-padding: var(--card-horizontal-body-padding-mobile);
    }

    .card.horizontal.image-padding,
    .card.horizontal.reversed.image-padding {
        --image-padding: var(--card-horizontal-image-padding-mobile);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

    .card.horizontal,
    .card.horizontal.reversed {
        --gap: var(--card-horizontal-gap-tablet);
        --body-padding: var(--card-horizontal-body-padding-tablet);
    }

    .card.horizontal.image-padding,
    .card.horizontal.reversed.image-padding {
        --image-padding: var(--card-horizontal-image-padding-tablet);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {

    .card.horizontal,
    .card.horizontal.reversed {
        --gap: var(--card-horizontal-gap-desktop);
        --body-padding: var(--card-horizontal-body-padding-desktop);
    }

    .card.horizontal.image-padding,
    .card.horizontal.reversed.image-padding {
        --image-padding: var(--card-horizontal-image-padding-desktop);
    }
}

@media screen and (min-width: 1440px) {

    .card.horizontal,
    .card.horizontal.reversed {
        --gap: var(--card-horizontal-gap-wide);
        --body-padding: var(--card-horizontal-body-padding-wide);
    }

    .card.horizontal.image-padding,
    .card.horizontal.reversed.image-padding {
        --image-padding: var(--card-horizontal-image-padding-wide);
    }
}

.card.horizontal.background--transparent.border--transparent {
    --image-padding: 0;
}

@media screen and (max-width: 767px) {
    .card.horizontal.background--transparent.border--transparent {
        --body-padding: 0;
    }
}

.card.vertical {
    --gap: var(--card-vertical-gap, 32px);
    --image-padding: 0;
    --body-padding: var(--card-vertical-body-padding, 0 20px 20px 20px);
}

.card.vertical.image-padding {
    --image-padding: var(--card-vertical-image-padding, 20px 20px 0 20px);
}

.card.vertical.background--transparent.border--transparent {
    --image-padding: 0;
    --body-padding: 0;
}

.card.vertical:not(.card-no-image) .card__body {
    padding-top: 0;
}

.card.content-width-auto .card__image {
    max-width: fit-content;
}

.card.identity-card {
    --card-border-width: var(--identity-card-border-width, 1px);
    --card-border-style: var(--identity-card-border-style, solid);
    --card-border-radius: var(--identity-card-border-radius, 0);
    --card-min-height: var(--identity-card-min-height, auto);
    --card-height: var(--identity-card-height, max-content);
    --card-image-border-radius: var(--identity-card-image-border-radius, 0);
    --card-horizontal-gap-desktop: var(--identity-card-horizontal-gap-desktop, 0);
    --card-horizontal-body-padding-desktop: var(--identity-card-horizontal-body-padding-desktop, 56px 56px 56px 56px);
    --card-horizontal-reversed-body-padding-desktop: var(--identity-card-horizontal-reversed-body-padding-desktop, 56px 56px 56px 56px);
    --card-horizontal-image-padding-desktop: var(--identity-card-horizontal-image-padding-desktop, 40px 0 40px 40px);
    --card-horizontal-reversed-image-padding-desktop: var(--identity-card-horizontal-reversed-image-padding-desktop, 40px 40px 40px 0);
    --card-horizontal-gap-mobile: var(--identity-card-horizontal-gap-mobile, 16px);
    --card-horizontal-body-padding-mobile: var(--identity-card-horizontal-body-padding-mobile, 0 20px 20px 20px);
    --card-horizontal-image-padding-mobile: var(--identity-card-horizontal-image-padding-mobile, 20px 20px 0 20px);
    --card-vertical-gap: var(--identity-card-vertical-gap, 16px);
    --card-vertical-body-padding: var(--identity-card-vertical-body-padding, 0 20px 20px 20px);
    --card-vertical-image-padding: var(--identity-card-vertical-image-padding, 20px 20px 0 20px);
}

@media screen and (max-width: 767px) {
    .card.identity-card .card__image {
        order: 0;
    }
}

.feature-card {
    --fc-foreground: var(--feature-card-foreground, inherit);
    --fc-background: var(--feature-card-background, transparent);
    --fc-border-width: var(--feature-card-border-width, 0);
    --fc-border-style: var(--feature-card-border-style, none);
    --fc-border-color: var(--feature-card-border-color, transparent);
    --fc-border-radius: var(--feature-card-border-radius, 12px);
    --fc-image-border-radius: var(--feature-card-image-border-radius, 0);
    --fc-shadow: var(--feature-card-shadow, none);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--fc-gap);
    width: 100%;
    border-width: var(--fc-border-width);
    border-style: var(--fc-border-style);
    border-color: var(--fc-border-color);
    border-radius: var(--fc-border-radius);
    background: var(--fc-background);
    color: var(--fc-foreground);
    padding: var(--fc-padding);
    box-shadow: var(--fc-shadow, none);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.feature-card:hover {
    --fc-foreground: var(--feature-card-foreground-hover, inherit);
    --fc-background: var(--feature-card-background-hover, transparent);
    --fc-border-width: var(--feature-card-border-width-hover, 0);
    --fc-border-style: var(--feature-card-border-style-hover, none);
    --fc-border-color: var(--feature-card-border-color-hover, transparent);
    --fc-border-radius: var(--feature-card-border-radius-hover, 12px);
    --fc-image-border-radius: var(--feature-card-image-border-radius-hover, 0);
    --fc-shadow: var(--feature-card-shadow-hover, none);
}

.feature-card .feature-card__image {
    flex-shrink: 0;
    width: var(--fc-image-width);
    height: var(--fc-image-height);
    overflow: hidden;
    border-radius: var(--fc-image-border-radius);
}

.feature-card .feature-card__image picture,
.feature-card .feature-card__image img {
    --image-border-radius: var(--fc-image-border-radius);
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feature-card .feature-card__content {
    display: block;
    padding: var(--fc-body-padding);
}

@media screen and (max-width: 767px) {
    .feature-card {
        --fc-gap: var(--feature-card-gap-mobile, 1rem);
        --fc-image-width: var(--feature-card-image-width-mobile, 200px);
        --fc-image-height: var(--feature-card-image-height-mobile, 200px);
        --fc-padding: var(--feature-card-padding-mobile, .5rem);
        --fc-body-padding: var(--feature-card-body-padding-mobile, 0);
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .feature-card {
        --fc-gap: var(--feature-card-gap-tablet, 1rem);
        --fc-image-width: var(--feature-card-image-width-tablet, 200px);
        --fc-image-height: var(--feature-card-image-height-tablet, 200px);
        --fc-padding: var(--feature-card-padding-tablet, .5rem);
        --fc-body-padding: var(--feature-card-body-padding-tablet, 0);
    }
}

@media screen and (min-width: 1080px) and (max-width: 1439px) {
    .feature-card {
        --fc-gap: var(--feature-card-gap-desktop, 1rem);
        --fc-image-width: var(--feature-card-image-width-desktop, 200px);
        --fc-image-height: var(--feature-card-image-height-desktop, 200px);
        --fc-padding: var(--feature-card-padding-desktop, .5rem);
        --fc-body-padding: var(--feature-card-body-padding-desktop, 0);
    }
}

@media screen and (min-width: 1440px) {
    .feature-card {
        --fc-gap: var(--feature-card-gap-wide, 1rem);
        --fc-image-width: var(--feature-card-image-width-wide, 200px);
        --fc-image-height: var(--feature-card-image-height-wide, 200px);
        --fc-padding: var(--feature-card-padding-wide, .5rem);
        --fc-body-padding: var(--feature-card-body-padding-wide, 0);
    }
}

.list-item.of-news {
    display: flex;
    gap: var(--list-item-gap, 20px 40px);
}

.list-item.of-news .list-item__image {
    height: max-content;
    max-height: fit-content;
}

.list-item.of-news .list-item__image img {
    aspect-ratio: var(--list-item-thumb-aspect-ratio, 3/2);
}

.list-item.of-news .list-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--list-item-body-gap, 8px);
    padding: var(--list-item-body-padding, 0 48px 0 0);
}

.list-item.of-news.horizontal {
    flex-direction: row;
}

.list-item.of-news.horizontal .list-item__image {
    flex-basis: var(--list-item-horizontal-thumb-width, 360px);
    min-width: var(--list-item-horizontal-thumb-width, 360px);
}

@media screen and (max-width: 768px) {
    .list-item.of-news.horizontal {
        flex-direction: column;
    }
}

.list-item.of-news.vertical {
    flex-direction: column;
}

prs-switch {
    --switch-background-checked: #4caf50;
    --uui-font-family: var(--switch-font-family, inherit);
    --foreground: var(--switch-foreground, var(--text-color));
    --text-secondary: var(--foreground);
    --bg-quaternary: var(--switch-background, #e0e0e0);
    --bg-brand-solid: var(--switch-background-checked);
    --bg-brand-solid-hover: var(--switch-background-checked);
}

/*# sourceMappingURL=styles.css.map */