html,
body {
    overflow-x: clip;
}

:root {
    interpolate-size: allow-keywords;

    --style-font: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sc-brand: #208194;
    --clr-text: #444;
    --clr-text-contrast: #323232;
    --clr-text-light: #efefec;

    --font-scale: 1;
    --font-body-size1: calc(clamp(0.5rem, 0.3571rem + 0.7143vw, 1rem) * var(--font-scale));
    --font-body-size: calc(clamp(1rem, 0.95rem + 0.35vw, 1.125rem) * var(--font-scale));
    --font-XXXsmall: calc(clamp(0.6944rem, 0.6493rem + 0.2258vw, 0.96rem) * var(--font-scale));
    --font-XXsmall: calc(clamp(0.8333rem, 0.771rem + 0.3117vw, 1.2rem) * var(--font-scale));
    --font-Xsmall: calc(clamp(1rem, 0.915rem + 0.4251vw, 1.5rem) * var(--font-scale));
    --font-small: calc(clamp(1.2rem, 1.0852rem + 0.5739vw, 1.875rem) * var(--font-scale));
    --font-medium: calc(clamp(1.44rem, 1.2863rem + 0.7683vw, 2.3438rem) * var(--font-scale));
    --font-large: calc(clamp(1.728rem, 1.5237rem + 1.0216vw, 2.9297rem) * var(--font-scale));
    --font-Xlarge: calc(clamp(2.0736rem, 1.8035rem + 1.3505vw, 3.6621rem) * var(--font-scale));
    --font-XXlarge: calc(clamp(2.4883rem, 2.1331rem + 1.7763vw, 4.5776rem) * var(--font-scale));
    /* --font-page-title: calc(clamp(2.15rem, 1.7rem + 1.9vw, 3.1rem) * var(--font-scale)); */
    --font-page-title: calc(clamp(.75rem, .9rem + 1.45vw, 3rem) * var(--font-scale));
    --page-title-letter-spacing: clamp(0.02em, 0.012em + 0.12vw, 0.045em);
    --page-title-line-height: clamp(1.08, 1.04 + 0.18vw, 1.18);
    --page-title-padding-top: clamp(0.35rem, 0.15rem + 0.8vw, 0.85rem);
    --page-title-padding-bottom: 0.08em;
    --page-title-gradient-start: #1b6b79;
    --page-title-gradient-end: #46a7b1;


    --mt-color-default-light: transparent !important;
    --mt-color-default: transparent !important;

    /* color-scheme: light dark; */

    body {
        font-family: var(--style-font);
        font-size: var(--font-body-size1);

        /* color: light-dark(var(--clr-text), var(--clr-text-light));
        background-color: light-dark(var(--clr-text-light), var(--clr-text-contrast)); */
    }
}

html {
    font-size: 16px;
    position: relative;
    /* Fallback color if oklch/gradients aren't supported. */
    /* background: #e8f2f3; */
}

body .region-content {
    :is(h1, h2, h3, h4, h5, h6) {
    color: var(--clr-text);
}

h1 {
    --spacing:0.05em;
    font-size: var(--font-Xlarge);
    letter-spacing: var(--spacing);
}

h2 {
    --spacing:0.05em;
    font-size: var(--font-large);
    letter-spacing: var(--spacing);
}

h3 {
    --spacing:0.05em;
    font-size: var(--font-medium);
    text-transform: none;
    letter-spacing: var(--spacing);
}

h4 {
    --spacing:0.025em;
    font-size: var(--font-small);
    text-transform: none;
    letter-spacing: var(--spacing);
}

h5 {
    --spacing:0.01em;
    font-size: var(--font-Xsmall);
    text-transform: none;
    letter-spacing: var(--spacing);
}

h6 {
    --spacing:0.01em;
    font-size: var(--font-XXsmall);
    text-transform: none;
    letter-spacing: var(--spacing);
}
}

h1.page-title {
    font-size: var(--font-page-title);
    line-height: var(--page-title-line-height);
    letter-spacing: var(--page-title-letter-spacing);
    text-transform: none;
    text-wrap: balance;
}

@property --g1x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 18%;
}

@property --g1y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 58%;
}

@property --g2x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 92%;
}

@property --g2y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%;
}

@property --g3x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52%;
}

@property --g3y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 92%;
}

@property --g4x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22%;
}

@property --g4y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 45%;
}

@property --g5x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 82%;
}

@property --g5y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 34%;
}

@property --g6x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 35%;
}

@property --g6y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 72%;
}

@property --g7x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 70%;
}

@property --g7y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 58%;
}

@property --g8x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 72%;
}

@property --g8y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 18%;
}

@property --g9x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 86%;
}

@property --g9y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 62%;
}

@property --g10x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 38%;
}

@property --g10y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 92%;
}

@property --c1 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.05;
}

@property --c2 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.10;
}

@property --c3 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.03;
}

@property --c4 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.13;
}

@property --c5 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.09;
}

@property --c6 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.07;
}

@property --c7 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.11;
}

@property --c8 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.07;
}

@property --c9 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.20;
}

@property --c10 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.16;
}

@property --a1 {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

@property --a2 {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

@property --a3 {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

@property --a4 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.95;
}

@property --a5 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.90;
}

@property --a6 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.85;
}

@property --a7 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.75;
}

@property --a8 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.78;
}

@property --a9 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.95;
}

@property --a10 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.85;
}

@property --hTeal {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@property --hCoral {
    syntax: '<number>';
    inherits: false;
    initial-value: 150;
}

@property --hPurple {
    syntax: '<number>';
    inherits: false;
    initial-value: 105;
}

@property --hGreen {
    syntax: '<number>';
    inherits: false;
    initial-value: 35;
}

@property --hLime {
    syntax: '<number>';
    inherits: false;
    initial-value: 55;
}

body {
    min-block-size: 100dvh;
    position: relative;
    isolation: isolate;
    /* keep ::before behind content without falling behind <html> */
    background: transparent;
}

/* Use a fixed pseudo-element so the animated gradient never stretches on long pages. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(1200px 700px at var(--g1x) var(--g1y),
            oklch(from var(--sc-brand) 96 var(--c1) calc(h + var(--hTeal)) / var(--a1)),
            transparent 68%),
        radial-gradient(1100px 820px at var(--g10x) var(--g10y),
            oklch(from var(--sc-brand) 95 var(--c10) calc(h + var(--hLime)) / var(--a10)),
            transparent 58%),
        radial-gradient(860px 560px at var(--g2x) var(--g2y),
            oklch(from var(--sc-brand) 92 var(--c2) calc(h + var(--hTeal)) / var(--a2)),
            transparent 60%),
        radial-gradient(980px 620px at var(--g3x) var(--g3y),
            oklch(from var(--sc-brand) 93 var(--c3) calc(h + var(--hTeal)) / var(--a3)),
            transparent 72%),
        radial-gradient(820px 520px at var(--g4x) var(--g4y),
            oklch(from var(--sc-brand) 90 var(--c4) calc(h + var(--hCoral)) / var(--a4)),
            transparent 62%),
        radial-gradient(900px 560px at var(--g5x) var(--g5y),
            oklch(from var(--sc-brand) 95 var(--c5) calc(h + var(--hTeal)) / var(--a5)),
            transparent 66%),
        radial-gradient(520px 420px at var(--g9x) var(--g9y),
            oklch(from var(--sc-brand) 82 var(--c9) calc(h + var(--hPurple)) / var(--a9)),
            transparent 74%),
        radial-gradient(520px 420px at var(--g6x) var(--g6y),
            oklch(from var(--sc-brand) 95 var(--c6) calc(h + var(--hTeal)) / var(--a6)),
            transparent 70%),
        radial-gradient(560px 460px at var(--g7x) var(--g7y),
            oklch(from var(--sc-brand) 92 var(--c7) calc(h + var(--hCoral)) / var(--a7)),
            transparent 68%),
        radial-gradient(520px 420px at var(--g8x) var(--g8y),
            oklch(from var(--sc-brand) 96 var(--c8) calc(h + var(--hPurple)) / var(--a8)),
            transparent 74%),
        radial-gradient(520px 420px at 14% 34%,
            oklch(from var(--sc-brand) 96 0.045 calc(h + var(--hPurple)) / 0.50),
            transparent 78%),
        linear-gradient(180deg,
            oklch(from var(--sc-brand) 98 0.01 h),
            oklch(from var(--sc-brand) 95 0.015 h));

    animation:
        scGradientFloat 16s ease-in-out infinite alternate,
        scGradientPulse 22s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    body::before {
        animation: none;
    }
}

@keyframes scGradientFloat {
    0% {
        --g1x: 18%;
        --g1y: 58%;
        --g2x: 92%;
        --g2y: 14%;
        --g3x: 52%;
        --g3y: 92%;
        --g4x: 18%;
        --g4y: 45%;
        --g5x: 82%;
        --g5y: 34%;

        --g6x: 35%;
        --g6y: 72%;
        --g7x: 70%;
        --g7y: 58%;
        --g8x: 72%;
        --g8y: 18%;

        --g9x: 86%;
        --g9y: 62%;
        --g10x: 38%;
        --g10y: 92%;
    }

    33% {
        --g1x: 26%;
        --g1y: 66%;
        --g2x: 84%;
        --g2y: 6%;
        --g3x: 44%;
        --g3y: 84%;
        --g4x: 26%;
        --g4y: 55%;
        --g5x: 74%;
        --g5y: 26%;

        --g6x: 42%;
        --g6y: 78%;
        --g7x: 62%;
        --g7y: 50%;
        --g8x: 78%;
        --g8y: 12%;

        --g9x: 78%;
        --g9y: 54%;
        --g10x: 48%;
        --g10y: 96%;
    }

    66% {
        --g1x: 14%;
        --g1y: 62%;
        --g2x: 96%;
        --g2y: 18%;
        --g3x: 58%;
        --g3y: 88%;
        --g4x: 14%;
        --g4y: 40%;
        --g5x: 88%;
        --g5y: 40%;

        --g6x: 30%;
        --g6y: 68%;
        --g7x: 76%;
        --g7y: 64%;
        --g8x: 66%;
        --g8y: 22%;

        --g9x: 92%;
        --g9y: 68%;
        --g10x: 62%;
        --g10y: 86%;
    }

    100% {
        --g1x: 82%;
        --g1y: 44%;
        --g2x: 88%;
        --g2y: 24%;
        --g3x: 64%;
        --g3y: 78%;
        --g4x: 22%;
        --g4y: 60%;
        --g5x: 90%;
        --g5y: 62%;

        --g6x: 22%;
        --g6y: 86%;
        --g7x: 58%;
        --g7y: 74%;
        --g8x: 30%;
        --g8y: 40%;

        --g9x: 70%;
        --g9y: 48%;
        --g10x: 78%;
        --g10y: 70%;
    }
}

@keyframes scGradientPulse {
    0% {
        --c1: 0.055;
        --c2: 0.095;
        --c3: 0.030;
        --c4: 0.125;
        --c5: 0.090;
        --c6: 0.065;
        --c7: 0.105;
        --c8: 0.070;
        --c9: 0.14;
        --c10: 0.18;

        --a1: 1;
        --a2: 1;
        --a3: 0.95;
        --a4: 0.95;
        --a5: 0.90;
        --a6: 0.85;
        --a7: 0.75;
        --a8: 0.78;
        --a9: 0.70;
        --a10: 0.85;

        --hTeal: 0;
        --hCoral: 150;
        --hPurple: 105;
        --hGreen: 35;
    }

    40% {
        --c1: 0.080;
        --c2: 0.135;
        --c3: 0.045;
        --c4: 0.165;
        --c5: 0.125;
        --c6: 0.090;
        --c7: 0.140;
        --c8: 0.095;
        --c9: 0.18;
        --c10: 0.26;

        --a4: 0.55;
        --a7: 0.45;
        --a9: 0.65;
        --a10: 0.97;

        --hTeal: 2;
        --hCoral: 165;
        --hPurple: 115;
        --hGreen: 42;
    }

    65% {
        --c1: 0.065;
        --c2: 0.115;
        --c3: 0.038;
        --c4: 0.145;
        --c5: 0.140;
        --c6: 0.075;
        --c7: 0.120;
        --c8: 0.085;
        --c9: 0.16;
        --c10: 0.22;

        --a5: 0.45;
        --a8: 0.60;
        --a9: 0.72;
        --a10: 0.92;

        --hTeal: -2;
        --hCoral: 140;
        --hPurple: 95;
        --hGreen: 28;
    }

    100% {
        --c1: 0.070;
        --c2: 0.115;
        --c3: 0.035;
        --c4: 0.145;
        --c5: 0.110;
        --c6: 0.080;
        --c7: 0.120;
        --c8: 0.080;
        --c9: 0.17;
        --c10: 0.24;

        --a1: 1;
        --a2: 1;
        --a3: 0.95;
        --a4: 0.80;
        --a5: 0.80;
        --a6: 0.85;
        --a7: 0.65;
        --a8: 0.68;
        --a9: 0.68;
        --a10: 0.95;

        --hTeal: 4;
        --hCoral: 158;
        --hPurple: 108;
        --hGreen: 34;
    }
}




.main-content__section {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.41);
    padding-inline: 2rem;
    margin-bottom: 100px;

    &:has(.wide-table) {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

.left-rail-ready:not(.left-rail-collapsed) .main-content__section:has(.wide-table) {
    inline-size: calc(110vw - 50%);
}


.left-rail-ready.left-rail-collapsed .main-content__section:has(.wide-table) {
    inline-size: calc(125vw - 50%);

}

@media (max-inline-size: 48rem) {
    .main-content__section {
        padding-inline: .75rem;
    }
}




.page-container {
    --nexus-page-border-width: 0px;

    position: relative;
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    min-block-size: 100dvh;
}

.page-shell {
    flex: 1 0 auto;
    min-block-size: 0;
}

.page-container > :is(.sticky-footer-container, .sticky-footer-placeholder, .footer-top, .footers-container) {
    flex-shrink: 0;
}

.page-container-border-enabled .page-container {
    --nexus-page-border-width: 10px;
}

.page-container-border-enabled .page-container > :is(.footer-top, .footers-container) {
    margin-inline: calc(var(--nexus-page-border-width) * -1);
}

.page-container-border-enabled .page-container > :is(.footer-top, .footers-container):last-child {
    margin-block-end: calc(var(--nexus-page-border-width) * -1);
}

@media (min-width: 992px) {
    .page-container-border-enabled .page-container {
        --nexus-page-border-width: 15px;
    }
}

.page-row {
    --max-page-col: 1280px;
    --min-page-col: 295px;
    --max-center-col: calc(var(--max-page-col) / 4);
    --min-center-col: calc(var(--min-page-col) / 4);
    --max-outer-col: calc(var(--max-center-col) / 2);
    --min-outer-col: calc(var(--min-center-col) / 2);

    display: grid;
    grid-template-areas:
        "l-aside main main main main r-aside";
    grid-template-columns:
        [full-start] 1fr [main-start] 
        minmax(min(var(--min-outer-col), 100%), var(--max-outer-col)) 
        [main-1] 
        minmax(min(var(--min-outer-col), 100%), var(--max-outer-col)) 
        [main-2] 
        minmax(min(var(--min-center-col), 100%), var(--max-center-col)) 
        [main-3] 
        minmax(min(var(--min-center-col), 100%), var(--max-center-col)) 
        [main-4] 
        minmax(min(var(--min-outer-col), 100%), var(--max-outer-col)) 
        [main-5] 
        minmax(min(var(--min-outer-col), 100%), var(--max-outer-col)) 
        [main-6] 1fr [full-end];
}

.page-row>aside {
    inline-size: clamp(220px, 20vw, 500px);
    padding: calc(56px + 2.25rem) 0 70px;
    grid-column: full-start / main-2;
    justify-self: center;

    &+.main-content__section {
        grid-column: main-2 / main-6;
    }
}

#content-top-highlighted {
    background: transparent;
    /* prevents container inheriting grey color from primary-local-tasks active link  */
}

.field--entity-reference-target-type-taxonomy-term.field--label-hidden::before, 
.field--entity-reference-target-type-taxonomy-term.field--label-hidden.field__item::before {
    display: none;
}

/*****************************
Learning module player fix
*****************************/
.learning-modules-view {
    padding-inline: .75rem;
}

#content-top:has(#block-nexus-returnbuttontouser) {
    .content-top__section {
        font-size: 1.5rem;
        padding: 0;
        margin-bottom: 1.5rem;
    }

    &+#main-content .main-content__section {
        padding: 0;
    }
}

.main-content__section:has(.field--name-field-learning-module.field--type-scorm-field-scorm-package) {
    grid-column: full-start / full-end;
}

.field--name-field-learning-module.field--type-scorm-field-scorm-package:not(.fullscreen) :is(.scorm-ui-player, iframe.responsive--iframe-dvh) {
    max-block-size: 600px;
    border-radius: 14px;
}

.node--type-learning-modules>.node__container>.node__main-content {
    display: grid;
    grid-template-columns: 25% 1fr;
    gap: 2rem;
    overflow-y: clip;

    .node__header {
        display: none;
    }

    .field--name-field-description {
        background: hsla(195deg, 53%, 79%, 0.44);
        border-radius: 14px;
        padding: 1rem;

        .field-item {
            font-size: var(--font-XXsmall);
            text-wrap: balance;
        }
    }

    .field--name-field-learning-module {
        border: 1px solid #208193;
        border-radius: 14px;

        &:has(#scorm-field-scorm-overlay:fullscreen::backdrop) {
            overflow: visible;
        }
    }

    #scorm-player-wrapper {
        position: relative;

        &>#fullscreen-button {
            position: absolute;
            top: 0;
            left: 0;
            margin: 0;
            border-radius: 14px 4px 4px 4px;
        }
    }
}

@media (max-inline-size: 850px) {
    .node--type-learning-modules>.node__container>.node__main-content {
        grid-template-columns: 1fr;

        #scorm-player-wrapper>#fullscreen-button {
            border-radius: 14px;
        }
    }
}

@media (max-inline-size: 400px) {
    h1.page-title.title {
        min-inline-size: fit-content;
        font-size: var(--font-medium);
    }
}


ul.tabs.primary {
    margin-bottom: 0;
}

.main-content__section {
    grid-column: 2 / 8;
    flex: 1 1 0;
    min-inline-size: 0;

    &:has(.profile-navigation-block) {
        background: none;
        padding: 0;
        border: 0;
        box-shadow: none;
        margin: 0;
        backdrop-filter: unset;
    }
}

.main-content__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    align-items: start;
}

.main-content__split-item {
    min-inline-size: 0;
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    padding: 0;
}

.main-content__split-item > .content-bottom__section {
    inline-size: 100%;
}

.content-bottom__section {
    padding: 0;
}

.main-content__split > :only-child {
    grid-column: 1 / -1;
}

@media (max-inline-size: 900px) {
    .main-content__split {
        grid-template-columns: 1fr;
    }
}

.region-aside {
    position: sticky;
    top: 100px;
}

#highlighted {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
}

.form-item input.error {
    --red: red;
    border-color: var(--red);
}

#tac-lite-admin-scheme-form {

    .details-wrapper {
        display: flex;
        gap: 1rem;

        &>div {
            flex-grow: 1;
            flex-basis: 25%;

            select {
                inline-size: 100%;
            }
        }
    }
}

#profile-session-counter .fieldset-wrapper {
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
}

table {
    --bs-gutter-x: 0;
    font-size: .75rem;

    tr {
        position: relative;
    }

    a {
        word-break: break-all;
    }
}

table thead tr::before {
    content: "No.";
    position: relative;
    display: table-cell;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    background-color: var(--mt-table-head-background-color);
    padding: 20px 8px 20px 8px;

}

table tbody {
    counter-reset: counters;

    tr::before {
        counter-increment: counters;
        content: counter(counters);
        position: relative;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        padding: 12px 8px 12px 8px;
    }

    tr:last-child::before {
        padding-bottom: 16px
    }

}

table thead+tbody tr:first-child::before {
    padding-top: 24px;
}

table tr th {
    padding: 20px 10px;
}

table tr td {
    padding: 12px 10px;
}

.paragraphs-tabs-wrapper table thead tr::before, 
.paragraphs-tabs-wrapper table tbody tr::before {
    content: none;
}

.header-second .region-header .block-page-title-block {
    flex-basis: 100%;

    h1 {
        display: inline-block;
        background: linear-gradient(180deg, var(--page-title-gradient-start) 10%, var(--page-title-gradient-end) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        padding-top: var(--page-title-padding-top);
        padding-bottom: var(--page-title-padding-bottom);
    }
}


/* .grid {
    display: grid;

    &.asymmetric {
        align-items: start;
        gap: clamp(1.5rem, 2vw, 3rem);
        grid-template-columns: minmax(min(34rem, 100%), 2.25fr) minmax(min(18rem, 100%), 1fr);
    }
    &.auto-3 {
        grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    }
    &.auto-min300 {
        grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    }
    &.auto-min400 {
        grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    }
} */

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col, 300px), 100%), 1fr))
}
.grid-asymmetric {
    --min-col-1: 67%;
    --min-col-2: 33px;
    --max-col-1: 400px;
    --max-col-2: 200px;
    --grid-gap: 2rem;
    --min-col-1-calc: calc(var(--min-col-1) - calc(var(--grid-gap) / 2));
    --min-col-2-calc: calc(var(--min-col-2) - calc(var(--grid-gap) / 2));
    --max-col-1-calc: calc(var(--min-col-1) - calc(var(--grid-gap) / 2));
    --max-col-2-calc: calc(var(--max-col-2) - calc(var(--grid-gap) / 2));
    display: grid;
    align-items: start;
    gap: var(--grid-gap);
    grid-template-columns: 
    minmax(
        min(var(--min-col-1-calc, 400px), 
        var(--max-col-1-calc, 67%)), 
    1fr) 
    minmax(
        min(var(--max-col-2-calc, 200px), 
        var(--max-col-2-calc, 33%)), 
    1fr);
}

@media (max-width: 1100px) {
    .grid-asymmetric {
        grid-template-columns: 1fr;
    }
}
.footers-container {
   margin-top: 100px; 
}

.footers-container .footer:has(.site-footer) {
    background: #0f5d67;
}

.footers-container .footer .footer__section:has(.site-footer) {
    padding: 0;
}

.footers-container .footer .footer__section:has(.site-footer) .block,
.footers-container .footer .footer__section:has(.site-footer) .block + .block {
    padding: 0;
}

.site-footer {
    --site-footer-bg: #0f5d67;
    --site-footer-text: #fff;
    --site-footer-link: rgb(255 255 255 / 92%);
    --site-footer-border: rgb(255 255 255 / 18%);
    --site-footer-heading-rule: rgb(255 255 255 / 26%);

    background: var(--site-footer-bg);
    color: var(--site-footer-text);
    padding:
        clamp(2rem, 3vw, 3rem)
        clamp(2rem, 3vw, 3rem)
        clamp(0.9rem, 1.4vw, 1.25rem);
}

.site-footer a {
    color: var(--site-footer-link);
    text-decoration-color: rgb(255 255 255 / 55%);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 180ms ease, text-decoration-color 180ms ease;
}

.site-footer a:is(:hover, :focus-visible) {
    color: var(--site-footer-text);
    text-decoration-color: var(--site-footer-text);
}

.site-footer a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 4px;
}

.site-footer__top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.75rem;
}

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 1.35rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--site-footer-border);
}

.site-footer__heading,
.site-footer__subheading {
    color: inherit;
    margin: 0 0 0.75rem;
}

.site-footer__heading {
    font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem);
}

.site-footer__subheading {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-bottom: 0.15rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--site-footer-heading-rule);
}

.site-footer__brand {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    max-width: 40rem;
}

.site-footer__brand .footer-logo {
    flex: 0 0 auto;
    inline-size: clamp(92px, 8.2vw, 128px);
    max-inline-size: 100%;
}

.site-footer__brand .footer-logo img {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.site-footer__brand > :not(.footer-logo) {
    flex: 1 1 18rem;
    min-inline-size: 0;
}

.site-footer__intro,
.site-footer__legal {
    margin: 0;
    color: rgb(255 255 255 / 88%);
}

.site-footer__intro {
    max-width: 32ch;
    margin-left: 1.5rem;
}

.site-footer__legal,
.site-footer__legal-list,
.site-footer__legal-list a {
    font-size: 0.875rem;
}

.site-footer__list,
.site-footer__legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__list li,
.site-footer__legal-list li {
    margin: 0;
}

.site-footer__list {
    display: grid;
    gap: 0.125rem;
    font-weight: 300;
}

.site-footer__legal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

@media (max-width: 700px) {
    .site-footer {
        padding: 1.5rem 1rem 0.9rem;
    }

    .site-footer__brand {
        flex-direction: column;
        gap: 0.75rem;
    }

    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

.header-top + .sticky-wrapper .header, .header-top + .header {
    border: 0;
}