:root {
    --layout-breakpoint-desk: 64rem;
    --layout-breakpoint-mob-max: 63.99875rem;
    --layout-breakpoint-tablet-min: 48rem;
    --layout-breakpoint-tablet-max: 63.99875rem;
    --layout-grid-col-count: 12;
    --layout-grid-col-gutter: 1.25rem;
    --layout-grid-col-width: 7.1875rem;
    --layout-container-min: 100rem;
    --layout-container-max: 117.5rem;
    --layout-container-footer-max: 117.5rem;
    --layout-container-page: 120rem;
    --layout-container-mobile: 21rem;
    --layout-gap-xxxs: 0.25rem;
    --layout-gap-xxs: 0.5rem;
    --layout-gap-xs: 0.75rem;
    --layout-gap-s: 1rem;
    --layout-gap-m: 1.25rem;
    --layout-gap-l: 1.5rem;
    --layout-gap-xl: 2rem;
    --layout-gap-xxl: 2.5rem;
    --layout-gap-xxxl: 5rem;
    --layout-gap-section: var(--layout-gap-xxl);
    --layout-padding-5xs: 0.5rem;
    --layout-padding-4xs: 0.75rem;
    --layout-padding-xxxs: 1rem;
    --layout-padding-xxs: 1.25rem;
    --layout-padding-xs: 0.5rem;
    --layout-padding-s: 0.75rem;
    --layout-padding-m: 1rem;
    --layout-padding-l: 1.25rem;
    --layout-padding-xl: 1.5rem;
    --layout-padding-2xl: 2rem;
    --layout-padding-3xl: 2.5rem;
    --layout-padding-4xl: 5rem;
    --layout-padding-5xl: 8.75rem;
    --layout-radius-none: 0;
    --layout-radius-s: 0.5rem;
    --layout-radius-m: 0.75rem;
    --layout-radius-l: 1rem;
    --layout-radius-xl: 1.25rem;
    --layout-radius-xxl: 1.5rem;
    --layout-radius-card: 1.5rem;
    --layout-radius-pill: 187.5rem;
    --layout-indention-container-large: var(--layout-padding-4xl);
    --layout-indention-container-medium: var(--layout-padding-3xl);
    --layout-indention-container-smal: var(--layout-padding-xl);
    --layout-indention-gap-xs: var(--layout-gap-xs);
    --layout-indention-gap-smal: var(--layout-gap-xl);
    --layout-indention-gap-medium: var(--layout-gap-l);
    --layout-indention-gap-large: var(--layout-gap-section);
    --layout-content-gap-after-header: 1rem;
    --layout-page-gutter: 1.25rem;
    --layout-col-1: calc(var(--layout-grid-col-width) + 0 * (var(--layout-grid-col-width) + var(--layout-grid-col-gutter)));
    --layout-col-2: calc(var(--layout-grid-col-width) + 1 * (var(--layout-grid-col-width) + var(--layout-grid-col-gutter)));
    --layout-col-3: calc(var(--layout-grid-col-width) + 2 * (var(--layout-grid-col-width) + var(--layout-grid-col-gutter)));
    --layout-col-4: calc(var(--layout-grid-col-width) + 3 * (var(--layout-grid-col-width) + var(--layout-grid-col-gutter)));
    --layout-col-5: calc(var(--layout-grid-col-width) + 4 * (var(--layout-grid-col-width) + var(--layout-grid-col-gutter)));
    --layout-col-6: calc(var(--layout-grid-col-width) + 5 * (var(--layout-grid-col-width) + var(--layout-grid-col-gutter)));
    --layout-col-7: calc(var(--layout-grid-col-width) + 6 * (var(--layout-grid-col-width) + var(--layout-grid-col-gutter)));
    --layout-col-8: calc(var(--layout-grid-col-width) + 7 * (var(--layout-grid-col-width) + var(--layout-grid-col-gutter)));
    --layout-col-9: calc(var(--layout-grid-col-width) + 8 * (var(--layout-grid-col-width) + var(--layout-grid-col-gutter)));
    --layout-col-10: calc(var(--layout-grid-col-width) + 9 * (var(--layout-grid-col-width) + var(--layout-grid-col-gutter)));
    --layout-col-11: calc(var(--layout-grid-col-width) + 10 * (var(--layout-grid-col-width) + var(--layout-grid-col-gutter)));
    --layout-col-12: calc(var(--layout-grid-col-width) + 11 * (var(--layout-grid-col-width) + var(--layout-grid-col-gutter)));
}

.layout-wrap {
    width: 100%;
    max-width: var(--layout-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--layout-page-gutter);
    padding-right: var(--layout-page-gutter);
    padding-bottom: var(--layout-page-gutter);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.layout-content {
    width: 100%;
    max-width: min(100%, var(--layout-container-min));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    --layout-grid-col-width: calc(
        (100% - (var(--layout-grid-col-count) - 1) * var(--layout-grid-col-gutter)) /
            var(--layout-grid-col-count)
    );
}

.layout-wrap > .layout-content {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap-section);
    min-width: 0;
}

.layout-wrap > .site-header + .layout-content {
    margin-top: var(--layout-content-gap-after-header);
}

.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--layout-grid-col-gutter);
}

.flex.--col {
    flex-direction: column;
}

.flex.--nowrap {
    flex-wrap: nowrap;
}

.flex.--gap-grid {
    gap: var(--layout-grid-col-gutter);
}

.flex.--gap-smal {
    gap: var(--layout-indention-gap-smal);
}

.flex.--gap-medium {
    gap: var(--layout-indention-gap-medium);
}

.flex.--gap-large {
    gap: var(--layout-indention-gap-large);
}

.flex.--just-start {
    justify-content: flex-start;
}

.flex.--just-center {
    justify-content: center;
}

.flex.--just-space {
    justify-content: space-between;
}

.flex.--just-end {
    justify-content: flex-end;
}

.flex.--align-start {
    align-items: flex-start;
}

.flex.--align-center {
    align-items: center;
}

.flex.--align-stretch {
    align-items: stretch;
}

.flex.--align-end {
    align-items: flex-end;
}

.col-1 { width: var(--layout-col-1); max-width: var(--layout-col-1); min-width: 0; flex: 0 1 var(--layout-col-1); }
.max-col-1 { max-width: var(--layout-col-1); min-width: 0; }
.fixed-col-1 { width: var(--layout-col-1); max-width: var(--layout-col-1); min-width: 0; flex: 0 0 var(--layout-col-1); }
.flex-grow-col-1 { flex: 1 1 0; min-width: 0; max-width: var(--layout-col-1); }
.flex-span-1 { flex: 0 1 var(--layout-col-1); min-width: 0; }
.col-2 { width: var(--layout-col-2); max-width: var(--layout-col-2); min-width: 0; flex: 0 1 var(--layout-col-2); }
.max-col-2 { max-width: var(--layout-col-2); min-width: 0; }
.fixed-col-2 { width: var(--layout-col-2); max-width: var(--layout-col-2); min-width: 0; flex: 0 0 var(--layout-col-2); }
.flex-grow-col-2 { flex: 1 1 0; min-width: 0; max-width: var(--layout-col-2); }
.flex-span-2 { flex: 0 1 var(--layout-col-2); min-width: 0; }
.col-3 { width: var(--layout-col-3); max-width: var(--layout-col-3); min-width: 0; flex: 0 1 var(--layout-col-3); }
.max-col-3 { max-width: var(--layout-col-3); min-width: 0; }
.fixed-col-3 { width: var(--layout-col-3); max-width: var(--layout-col-3); min-width: 0; flex: 0 0 var(--layout-col-3); }
.flex-grow-col-3 { flex: 1 1 0; min-width: 0; max-width: var(--layout-col-3); }
.flex-span-3 { flex: 0 1 var(--layout-col-3); min-width: 0; }
.col-4 { width: var(--layout-col-4); max-width: var(--layout-col-4); min-width: 0; flex: 0 1 var(--layout-col-4); }
.max-col-4 { max-width: var(--layout-col-4); min-width: 0; }
.fixed-col-4 { width: var(--layout-col-4); max-width: var(--layout-col-4); min-width: 0; flex: 0 0 var(--layout-col-4); }
.flex-grow-col-4 { flex: 1 1 0; min-width: 0; max-width: var(--layout-col-4); }
.flex-span-4 { flex: 0 1 var(--layout-col-4); min-width: 0; }
.col-5 { width: var(--layout-col-5); max-width: var(--layout-col-5); min-width: 0; flex: 0 1 var(--layout-col-5); }
.max-col-5 { max-width: var(--layout-col-5); min-width: 0; }
.fixed-col-5 { width: var(--layout-col-5); max-width: var(--layout-col-5); min-width: 0; flex: 0 0 var(--layout-col-5); }
.flex-grow-col-5 { flex: 1 1 0; min-width: 0; max-width: var(--layout-col-5); }
.flex-span-5 { flex: 0 1 var(--layout-col-5); min-width: 0; }
.col-6 { width: var(--layout-col-6); max-width: var(--layout-col-6); min-width: 0; flex: 0 1 var(--layout-col-6); }
.max-col-6 { max-width: var(--layout-col-6); min-width: 0; }
.fixed-col-6 { width: var(--layout-col-6); max-width: var(--layout-col-6); min-width: 0; flex: 0 0 var(--layout-col-6); }
.flex-grow-col-6 { flex: 1 1 0; min-width: 0; max-width: var(--layout-col-6); }
.flex-span-6 { flex: 0 1 var(--layout-col-6); min-width: 0; }
.col-7 { width: var(--layout-col-7); max-width: var(--layout-col-7); min-width: 0; flex: 0 1 var(--layout-col-7); }
.max-col-7 { max-width: var(--layout-col-7); min-width: 0; }
.fixed-col-7 { width: var(--layout-col-7); max-width: var(--layout-col-7); min-width: 0; flex: 0 0 var(--layout-col-7); }
.flex-grow-col-7 { flex: 1 1 0; min-width: 0; max-width: var(--layout-col-7); }
.flex-span-7 { flex: 0 1 var(--layout-col-7); min-width: 0; }
.col-8 { width: var(--layout-col-8); max-width: var(--layout-col-8); min-width: 0; flex: 0 1 var(--layout-col-8); }
.max-col-8 { max-width: var(--layout-col-8); min-width: 0; }
.fixed-col-8 { width: var(--layout-col-8); max-width: var(--layout-col-8); min-width: 0; flex: 0 0 var(--layout-col-8); }
.flex-grow-col-8 { flex: 1 1 0; min-width: 0; max-width: var(--layout-col-8); }
.flex-span-8 { flex: 0 1 var(--layout-col-8); min-width: 0; }
.col-9 { width: var(--layout-col-9); max-width: var(--layout-col-9); min-width: 0; flex: 0 1 var(--layout-col-9); }
.max-col-9 { max-width: var(--layout-col-9); min-width: 0; }
.fixed-col-9 { width: var(--layout-col-9); max-width: var(--layout-col-9); min-width: 0; flex: 0 0 var(--layout-col-9); }
.flex-grow-col-9 { flex: 1 1 0; min-width: 0; max-width: var(--layout-col-9); }
.flex-span-9 { flex: 0 1 var(--layout-col-9); min-width: 0; }
.col-10 { width: var(--layout-col-10); max-width: var(--layout-col-10); min-width: 0; flex: 0 1 var(--layout-col-10); }
.max-col-10 { max-width: var(--layout-col-10); min-width: 0; }
.fixed-col-10 { width: var(--layout-col-10); max-width: var(--layout-col-10); min-width: 0; flex: 0 0 var(--layout-col-10); }
.flex-grow-col-10 { flex: 1 1 0; min-width: 0; max-width: var(--layout-col-10); }
.flex-span-10 { flex: 0 1 var(--layout-col-10); min-width: 0; }
.col-11 { width: var(--layout-col-11); max-width: var(--layout-col-11); min-width: 0; flex: 0 1 var(--layout-col-11); }
.max-col-11 { max-width: var(--layout-col-11); min-width: 0; }
.fixed-col-11 { width: var(--layout-col-11); max-width: var(--layout-col-11); min-width: 0; flex: 0 0 var(--layout-col-11); }
.flex-grow-col-11 { flex: 1 1 0; min-width: 0; max-width: var(--layout-col-11); }
.flex-span-11 { flex: 0 1 var(--layout-col-11); min-width: 0; }
.col-12 { width: var(--layout-col-12); max-width: var(--layout-col-12); min-width: 0; flex: 0 1 var(--layout-col-12); }
.max-col-12 { max-width: var(--layout-col-12); min-width: 0; }
.fixed-col-12 { width: var(--layout-col-12); max-width: var(--layout-col-12); min-width: 0; flex: 0 0 var(--layout-col-12); }
.flex-grow-col-12 { flex: 1 1 0; min-width: 0; max-width: var(--layout-col-12); }
.flex-span-12 { flex: 0 1 var(--layout-col-12); min-width: 0; }


@media screen and (max-width: 1440px) {
    :root {
        --layout-indention-container-large: var(--layout-padding-m);
        --layout-indention-container-medium: var(--layout-padding-s);
        --layout-indention-container-smal: var(--layout-padding-xs);
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --layout-grid-col-count: 8;
        --layout-grid-col-gutter: 0.75rem;
        --layout-container-max: 100%;
        --layout-indention-container-large: var(--layout-padding-s);
        --layout-indention-container-medium: var(--layout-padding-xs);
        --layout-indention-container-smal: var(--layout-padding-xxxs);
        --layout-indention-gap-large: var(--layout-gap-xl);
        --layout-indention-gap-medium: var(--layout-gap-m);
    }
    .layout-wrap {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: var(--layout-page-gutter);
    }

    .layout-wrap > .layout-content {
        max-width: none;
        width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .layout-wrap > .site-header + .layout-content {
        margin-top: var(--site-header-mob-offset);
    }
}

@media screen and (max-width: 768px) {
    :root {
        --layout-grid-col-count: 6;
        --layout-grid-col-gutter: 0.75rem;
        --layout-indention-container-large: var(--layout-padding-xs);
        --layout-indention-container-medium: var(--layout-padding-xxxs);
        --layout-indention-container-smal: var(--layout-padding-xxs);
        --layout-indention-gap-large: var(--layout-gap-l);
        --layout-indention-gap-medium: var(--layout-gap-xs);
    }

    .flex-span-t-full {
        flex: 0 1 100%;
        min-width: 0;
    }
}

@media screen and (max-width: 640px) {
    :root {
        --layout-grid-col-count: 4;
        --layout-grid-col-gutter: 0.5rem;
        --layout-indention-container-large: var(--layout-gap-l);
        --layout-indention-container-medium: var(--layout-padding-xxs);
        --layout-indention-container-smal: var(--layout-gap-l);
        --layout-indention-gap-large: var(--layout-padding-xs);
        --layout-indention-gap-medium: var(--layout-gap-xxs);
    }

    .flex-span-ml-full {
        flex: 0 1 100%;
        min-width: 0;
    }
}

@media screen and (max-width: 468px) {
    :root {
        --layout-grid-col-count: 2;
        --layout-grid-col-gutter: 0.5rem;
        --layout-indention-container-large: var(--layout-gap-xs);
        --layout-indention-container-medium: var(--layout-gap-xs);
        --layout-indention-container-smal: var(--layout-gap-xxs);
        --layout-indention-gap-large: var(--layout-gap-xs);
        --layout-indention-gap-medium: var(--layout-gap-xxxs);
    }

    .flex-span-ms-full {
        flex: 0 1 100%;
        min-width: 0;
    }
}

@media screen and (max-width: 1023px) {
    :root {
        --layout-bleed-gutter: 0.75rem;
        --layout-mob-bleed-width: calc(100% + (2 * var(--layout-bleed-gutter)));
        --layout-mob-bleed-margin-left: calc(-1 * var(--layout-bleed-gutter));
        --layout-mob-bleed-margin-right: calc(-1 * var(--layout-bleed-gutter));
    }

    .layout-mob-bleed {
        width: var(--layout-mob-bleed-width);
        max-width: var(--layout-mob-bleed-width);
        margin-left: var(--layout-mob-bleed-margin-left);
        margin-right: var(--layout-mob-bleed-margin-right);
    }

    .flex-span-m-full {
        flex: 0 1 100%;
        min-width: 0;
    }
}

@media screen and (min-width: 64rem) {
    :root {
        --layout-gap-section: var(--layout-gap-xxxl);
    }
}