/* ---FONTS--- */
@layer fonts {
    /* ---FONT FACE--- */
    /* //////////////////////// */

    /* FixelText- regular */
    @font-face {
        font-family: 'Fixel Text';
        font-weight: 400;
        font-style: normal;
        src: url('../fonts/FixelText-Regular.woff2') format('woff2');
        font-display: swap;
    }

    /* FixelText- italic */
    @font-face {
        font-family: 'Fixel Text';
        font-weight: 400;
        font-style: italic;
        src: url('../fonts/FixelText-RegularItalic.woff2') format('woff2');
        font-display: swap;
    }

    /* FixelText- medium */
    @font-face {
        font-family: 'Fixel Text';
        font-weight: 600;
        font-style: normal;
        src: url('../fonts/FixelText-Medium.woff2') format('woff2');
        font-display: swap;
    }

    /* FixelText- bold */
    /* @font-face {
        font-family: 'Fixel Text';
        font-weight: 700;
        font-style: normal;
        src: url('../fonts/FixelText-Bold.woff2') format('woff2');
        font-display: swap;
    } */

    /* FixelDisplay - medium */
    @font-face {
        font-family: 'Fixel Display';
        font-weight: 600;
        font-style: normal;
        src: url('../fonts/FixelDisplay-Medium.woff2') format('woff2');
        font-display: swap;
    }

    /* FixelDisplay - black */
    @font-face {
        font-family: 'Fixel Display';
        font-weight: 900;
        font-style: normal;
        src: url('../fonts/FixelDisplay-Black.woff2') format('woff2');
        font-display: swap;
    }
}

/* ---ROOT--- */
/* //////////////////////// */
@layer root {
    :root {
        --clr-white: hsl(0 0% 100%);
        --clr-neutral-100: hsl(0, 5%, 96%);
        --clr-neutral-200: hsl(340, 7%, 92%);
        --clr-neutral-300: hsl(336, 8%, 88%);
        --clr-neutral-400: hsl(340, 7%, 84%);
        --clr-neutral-600: hsl(340, 7%, 16%);
        --clr-neutral-700: hsl(336, 8%, 12%);
        --clr-neutral-800: hsl(340, 7%, 8%);
        --clr-neutral-900: hsl(0, 5%, 4%);
        --clr-black: hsl(0 0% 0%);

        --clr-accent-200: hsl(336, 95%, 68%);
        --clr-accent-400: hsl(336, 69%, 52%);

        --body-background-color: var(--clr-neutral-800);
        --header-background-color: var(--clr-neutral-900);
        --section-background-color: var(--body-background-color);
        --footer-background-color: var(--clr-neutral-900);
        --heading-text-color: var(--clr-neutral-200);
        --body-text-color: var(--clr-neutral-400);
        --accent-text-color: var(--clr-accent-200);
        --nav-link-text-color: var(--clr-neutral-200);
        --button-bg-color: var(--clr-accent-400);
        --button-color: var(--clr-white);

        --ff-heading: "Fixel Display", sans-serif;
        --ff-body: "Fixel Text", sans-serif;

        --fw-regular: 400;
        --fw-bold: 600;
        --fw-black: 900;

        --step--2: clamp(0.6252rem, 0.7588rem + -0.1724vw, 0.72rem);
        --step--1: clamp(0.884rem, 0.9065rem + -0.0291vw, 0.9rem);
        --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
        --step-1: clamp(1.4063rem, 1.2585rem + 0.6568vw, 1.7675rem);
        --step-2: clamp(1.7578rem, 1.4545rem + 1.3481vw, 2.4992rem);
        --step-3: clamp(2.1973rem, 1.6504rem + 2.4303vw, 3.5339rem);
        --step-4: clamp(2.7466rem, 1.826rem + 4.0916vw, 4.997rem);
        --step-5: clamp(3.4332rem, 1.9472rem + 6.6046vw, 7.0657rem);

        --fs-footer: var(--step--1);
        --fs-body: var(--step-0);
        --fs-button: var(--step-0);
        --fs-nav-links: var(--step-0);
        --fs-primary-heading: var(--step-5);
        --fs-secondary-heading: var(--step-4);

        --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
        --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
        --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
        --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
        --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
        --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
        --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
        --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
        --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

        /* One-up pairs */
        --space-3xs-2xs: clamp(0.3125rem, 0.2404rem + 0.3205vw, 0.625rem);
        --space-2xs-xs: clamp(0.5625rem, 0.476rem + 0.3846vw, 0.9375rem);
        --space-xs-s: clamp(0.875rem, 0.7885rem + 0.3846vw, 1.25rem);
        --space-s-m: clamp(1.125rem, 0.9519rem + 0.7692vw, 1.875rem);
        --space-m-l: clamp(1.6875rem, 1.5rem + 0.8333vw, 2.5rem);
        --space-l-xl: clamp(2.25rem, 1.9038rem + 1.5385vw, 3.75rem);
        --space-xl-2xl: clamp(3.375rem, 3rem + 1.6667vw, 5rem);
        --space-2xl-3xl: clamp(4.5rem, 3.8077rem + 3.0769vw, 7.5rem);

        --padding-block: var(--space-2xl-3xl);
    }
}

@layer reset, general, layout, components, utilities;

/* ---RESET STYLES--- */
/* //////////////////////// */
@layer reset {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        scroll-behavior: smooth;
    }

    html,
    body {
        margin: 0;
        padding: 0;
    }

    body {
        min-height: 100vh;
        text-rendering: optimizeSpeed;
    }

    p,
    h1,
    h2,
    h3,
    h4 {
        margin: 0;
        overflow-wrap: break-word;
    }

    h1,
    h2,
    h3,
    h4 {
        text-wrap: balance;
    }

    p {
        max-width: var(--body-max-width, 65ch);
        text-wrap: pretty;
    }

    a:not([class]),
    a:not([class]):link,
    a:not([class]):visited {
        text-decoration-skip-ink: auto;
        color: currentColor;
    }

    :is(ul, ol)[class] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    img,
    picture,
    svg {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
        font-style: italic;
    }

    button {
        font: inherit;
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        color: inherit;
    }

    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* ---GENERAL STYLES--- */
/* //////////////////////// */
@layer general {
    *:focus-visible {
        outline-style: var(--outline-style, solid);
        outline-offset: var(--outline-offset, 6px);
        outline-color: var(--outline-color, currentColor);
        outline-width: var(--outline-width, 4px);
    }

    body {
        background-color: var(--section-background-color);
        color: var(--body-text-color);
        font-family: var(--ff-body);
        font-weight: var(--fw-regular);
        font-size: var(--fs-body);
        line-height: 1.6;
    }

    h1,
    h2,
    h3 {
        font-family: var(--ff-heading);
        text-transform: uppercase;
        line-height: 1.1;
        color: var(--heading-text-color);
    }

    h1,
    h2 {
        font-weight: var(--fw-black);
    }

    h3 {
        font-size: var(--step-3);
        font-weight: var(--fw-bold);
    }

    section {
        background-color: var(--section-background-color);
    }

    a:not([class]) {
        transition: color .3s linear;

        &:focus-visible,
        &:hover,
        &:active {
            color: var(--accent-text-color);
        }
    }
}

/* ---COMPONENTS STYLES--- */
/* //////////////////////// */
@layer components {

    .logo,
    .logo:link,
    .logo:visited {
        --_logo-normal-text-color: var(--nav-link-text-color);
        --_logo-accent-text-color: var(--clr-accent-400);
        display: inline-flex;
        gap: .5ch;
        max-width: fit-content;
        padding-block: .2em;
        padding-inline: .4em;
        font-size: var(--step-1);
        font-weight: var(--fw-bold);
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--_logo-normal-text-color);

        & > * {
            transition: color .3s linear;
        }

        & > .logo-text-accent {
            color: var(--_logo-accent-text-color);
        }

        &:focus-visible,
        &:hover,
        &:active {

            & > .logo-text-normal {
                color: var(--_logo-accent-text-color);
            }

            & > .logo-text-accent {
                color: var(--_logo-normal-text-color);
            }
        }
    }

    .button,
    .button:link,
    .button:visited {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding-block: .8em;
        padding-inline: 1.6em;
        max-width: fit-content;
        font-size: var(--fs-button);
        font-weight: var(--fw-bold);
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: .05em;
        background-color: var(--button-bg-color);
        color: var(--button-color);
        transition: .3s linear;
        transition-property: background-color, color;

        &:focus-visible {
            --outline-color: var(--clr-white);
            background-color: var(--clr-white);
            color: var(--clr-black);
        }

        &:hover {
            background-color: hsl(from var(--button-bg-color) h s calc(l - 8));
        }

        &:active {
            scale: .95;
        }
    }

    .skip-to-main-content-link {
        position: absolute;
        display: inline-block;
        left: 50%;
        padding: 1em;
        line-height: 1.2;
        font-size: var(--step-1);
        text-transform: uppercase;
        font-weight: var(--fw-bold);
        background-color: var(--clr-neutral-100);
        color: var(--clr-neutral-900);
        /* Ensure the Y position is set to zero and any movement on the transform property */
        translate: -50% -999rem;
        opacity: 0;
        z-index: 999;
        transition: .3s ease-in-out;
        transition-property: translate, opacity;

        &::after {
            content: "";
        }

        &:focus {
            opacity: 1;
            translate: -50% 0rem;
            outline-color: var(--clr-neutral-200);
        }
    }

    .icon-content-flex-wrapper {
        display: inline-flex;
        align-items: center;
        gap: .75rem;

        .icon-wrapper {
            flex-shrink: 0;
            /* width: 2.25rem;
            background-color: var(--clr-accent-400);
            padding: .375rem;
            aspect-ratio: 1;
            border-radius: 50%;
            line-height: 1; */

            svg {
                --_svg-color: var(--clr-accent-200);
                width: 1.2em;
                color: var(--_svg-color);
                fill: var(--_svg-color);
                /* width: 100%;
                display: block;
                line-height: inherit; */
            }
        }
    }
}

/* ---UTILITIES STYLES--- */
/* //////////////////////// */
@layer utilities {

    .visually-hidden:not(:focus):not(:active):not(:focus-within) {
        position: absolute;
        width: 1px;
        height: 1px;
        clip-path: inset(50%);
        white-space: nowrap;
        overflow: hidden;
    }

    .primary-heading {
        font-size: var(--fs-primary-heading);
    }

    .secondary-heading {
        position: relative;
        font-size: var(--fs-secondary-heading);
        margin-block-end: var(--space-xl);

        &::before {
            position: absolute;
            content: "";
            bottom: 0;
            width: 2.5ch;
            height: 2px;
            background-color: var(--clr-accent-400);
        }
    }

    .color-accent {
        color: var(--accent-text-color);
    }

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

/* ---LAYOUT STYLES--- */
/* //////////////////////// */
@layer layout {

    @layer layout-templates {

        .content-grid {
            --_content-max-width: 120rem;
            --_padding-inline: 1.25rem;
            --_content-size: min(100% - var(--_padding-inline) * 2, var(--_content-max-width));
            --_breakout-max-width: 135rem;
            --_breakout-size: calc((var(--_breakout-max-width) - var(--_content-max-width)) / 2);
            display: grid;
            grid-template-columns: [full-width-start] minmax(var(--_padding-inline), 1fr) [breakout-start] minmax(0, var(--_breakout-size)) [content-start] var(--_content-size) [content-end] minmax(0, var(--_breakout-size)) [breakout-end] minmax(var(--_padding-inline), 1fr) [full-width-end];

            &,
            .full-width {

                & > :not(.breakout, .full-width) {
                    grid-column: content;
                }
            }

            & > .breakout {
                grid-column: breakout;

                display: grid;
                grid-template-columns: minmax(var(--_padding-inline), var(--_breakout-size)) [content-start] var(--_content-size) [content-end] minmax(var(--_padding-inline), var(--_breakout-size));

                & > * {
                    grid-column: content;
                }
            }

            & > .full-width {
                grid-column: full-width;

                display: grid;
                grid-template-columns: inherit;
            }
        }

        .auto-fit-grid {
            --grid-max-col-count: 4;
            --grid-min-col-size: 20rem;
            --grid-gap: var(--space-xs-s);

            /* Calculation, don't touch!  */
            --_grid-col-size-calc: calc((100% - var(--grid-gap) * (var(--grid-max-col-count) - 1)) / var(--grid-max-col-count));
            --_grid-col-min-size-calc: calc(min(100%, max(var(--grid-min-col-size), var(--_grid-col-size-calc))));

            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(var(--_grid-col-min-size-calc), 1fr));
            gap: var(--grid-gap);
        }
    }

    /* Add modal for body when mobile nav is open */
    body {
        @media (width < calc(860 / 16 * 1rem)) {
            &:has(.nav-list[data-state="opened"]) {
                position: relative;

                &::before {
                    position: absolute;
                    content: "";
                    inset: 0;
                    background-color: hsl(from var(--section-background-color) h s l / .4);
                    z-index: 10;
                    animation-name: modalAnimation;
                    animation-duration: .3s;
                    animation-timing-function: linear;
                    animation-fill-mode: forwards;
                }
            }
        }
    }

    @keyframes modalAnimation {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    /* NAV LIST */
    .nav-list {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;

        /* @media (width >=calc(860 / 16 * 1rem)) {
            &:has(.nav-link:hover) > li .nav-link:not(:hover) {
                opacity: .8;
            }
        } */

        .nav-link,
        .nav-link:link,
        .nav-link:visited {
            position: relative;
            display: block;
            padding-block: .4em;
            padding-inline: .8em;
            font-size: var(--fs-nav-links);
            font-weight: var(--fw-bold);
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: .1em;
            color: var(--nav-link-text-color);
            transition: .3s ease-in-out;
            transition-property: color, opacity;

            &:focus-visible,
            &:hover,
            &:active {
                color: var(--accent-text-color);
            }
        }
    }

    /* PRIMARY HEADER */
    .primary-header {
        --_header-border: 1px solid hsl(from var(--clr-neutral-100) h s l / .15);
        position: relative;
        padding-block: var(--space-s-m);
        background-color: var(--header-background-color);
        border-bottom: var(--_header-border);
        z-index: 888;

        .header-flex {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-m) var(--space-s);
        }

        .primary-nav {

            .menu-toggle {
                padding-block: 1.375rem;
                padding-inline: .5rem;
                cursor: pointer;

                @media (width >=calc(860 / 16 * 1rem)) {
                    display: none;
                }

                &[aria-expanded="true"] {
                    & .hamburger {
                        rotate: 45deg;

                        &::before {
                            opacity: 0;
                        }

                        &::after {
                            rotate: -90deg;
                            translate: 0 calc(var(--_hamburger-bun-height) * -1);
                        }
                    }
                }

                & > .hamburger {
                    --_bun-height: 4;
                    --_hamburger-bun-height: calc(var(--_bun-height) / 16 * 1rem);
                    display: block;
                    background-color: var(--clr-white);
                    width: calc(var(--_hamburger-bun-height) * 8);
                    height: var(--_hamburger-bun-height);
                    border-radius: 1000vw;
                    transition: .3s linear;
                    transition-property: background-color, rotate, translate, opacity;

                    &::before,
                    &::after {
                        content: '';
                        display: block;
                        font-size: inherit;
                        background-color: inherit;
                        height: inherit;
                        width: inherit;
                        border-radius: inherit;
                        transition: inherit;
                        transition-property: inherit;
                    }

                    &::before {
                        translate: 0 calc(var(--_hamburger-bun-height) * -2);
                    }

                    &::after {
                        translate: 0 var(--_hamburger-bun-height);
                    }
                }

                &:focus-visible,
                &:hover,
                &:active {
                    & > .hamburger {
                        background-color: var(--clr-accent-400);
                    }
                }
            }
        }

        .nav-list {

            .nav-link {
                @media (width >=calc(860 / 16 * 1rem)) {

                    &::before,
                    &::after {
                        --_weight-height: 16px;
                        --_weight-width: 4px;
                        --_bar-height: 1px;
                        position: absolute;
                        content: '';
                        left: 0;
                        right: 0;
                        bottom: 0;
                        pointer-events: none;
                        transition: .3s linear;
                        transition-property: bottom;
                    }

                    /* WEIGHTS */
                    &::before {
                        border: var(--_weight-width) solid var(--clr-accent-400);
                        border-bottom: none;
                        border-top: none;
                        height: var(--_weight-height);
                        bottom: calc(var(--_weight-height) * -1 / 2);
                    }

                    /* BAR */
                    &::after {
                        left: var(--_weight-width);
                        bottom: 0;
                        translate: 0 50%;
                        width: calc(100% - var(--_weight-width) * 2);
                        height: var(--_bar-height);
                        background-color: var(--clr-neutral-100);
                    }

                    &:focus-visible,
                    &:hover,
                    &:active {

                        &::before {
                            bottom: calc(100% - var(--_weight-height) / 2);
                        }

                        &::after {
                            bottom: 100%;
                        }
                    }
                }
            }

            @media (width < calc(860 / 16 * 1rem)) {
                --_space-around: var(--space-2xs);
                position: absolute;
                flex-direction: column;
                gap: 0;
                padding: var(--_space-around);
                top: 100%;
                right: var(--_padding-inline);
                width: min(15em, 100% - var(--_padding-inline) * 2);
                background-color: hsl(from var(--header-background-color) h s l / .6);
                backdrop-filter: blur(10px);
                border: var(--_header-border);
                transform-origin: center top;
                animation-timing-function: linear;
                animation-fill-mode: forwards;
                animation-duration: .3s;

                & > li {

                    &:not(&:first-child) {

                        padding-block-start: var(--_space-around);
                    }

                    &:not(&:last-child) {
                        padding-block-end: var(--_space-around);
                    }

                    & + li {
                        border-top: var(--_header-border);
                    }

                    & > .nav-link {
                        padding-block: .8em;
                        text-align: center;

                        &:focus-visible,
                        &:hover,
                        &:active {
                            background-color: var(--clr-accent-400);
                            color: var(--clr-white);
                        }
                    }
                }

                &[data-state="opened"] {
                    animation-name: menuAnimationOpen;
                    display: flex;
                }

                &[data-state="closing"] {
                    animation-name: menuAnimationClosing;
                }

                &[data-state="closed"] {
                    display: none;
                }
            }
        }


    }

    @keyframes menuAnimationOpen {
        0% {
            scale: 1 .1;
            opacity: 0;
        }

        100% {
            scale: 1 1;
            opacity: 1;
        }
    }

    @keyframes menuAnimationClosing {
        100% {
            scale: 1 .1;
            opacity: 0;
        }

        0% {
            scale: 1 1;
            opacity: 1;
        }
    }

    /* HERO */
    .hero {
        --section-background-color: var(--clr-neutral-900);
        padding-block-start: var(--space-l);

        @media (width < calc(850 / 16 * 1rem)) {
            padding-block-start: var(--padding-block);

        }

        .hero-grid {
            grid-column-start: breakout;
            display: grid;
            align-items: center;
            gap: var(--space-l) var(--space-m-l);

            @media (width >=calc(850 / 16 * 1rem)) {
                grid-template-columns: 1fr 1.2fr;
                grid-template-rows: var(--padding-block) auto var(--padding-block);
            }

            .hero-content {
                display: grid;
                row-gap: var(--space-l);
                z-index: 2;

                @media (width >=calc(850 / 16 * 1rem)) {
                    grid-column: 2;
                    grid-row: 2;
                }
            }

            .hero-img-wrapper {
                height: 100%;
                overflow: clip;

                @media (width >=calc(850 / 16 * 1rem)) {
                    grid-row: 1 / -1;
                }

                img {
                    height: 100%;
                    object-fit: cover;
                }

            }
        }
    }

    /* ABOUT */
    .about {

        .about-grid {
            display: grid;
            isolation: isolate;

            @media (width >=calc(850 / 16 * 1rem)) {
                grid-column-end: full-width;
                grid-template-columns: minmax(15ch, 65ch) auto;
                column-gap: var(--space-xl-2xl);
            }

            .about-content {
                padding-block: var(--padding-block);
            }

            .about-img-wrapper {
                display: grid;
                align-items: end;
                /* padding-block-start: var(--space-xl); */
                /* max-width: fit-content; */
                height: 100%;
                background-color: var(--clr-black);
                overflow: clip;

                & > picture,
                & > picture > img {
                    height: 100%;
                }

                & > picture > img {
                    object-fit: cover;

                }
            }
        }
    }

    /* SERVICES */
    .services {
        --section-background-color: var(--clr-neutral-700);

        padding-block: var(--padding-block);
        justify-items: center;

        .services-list {
            --grid-max-col-count: 5;
            row-gap: var(--space-m-l);
            width: 100%;

            .service {
                display: grid;
                justify-items: center;
                text-align: center;
                gap: var(--space-m);
                height: 100%;

                .service-title {
                    font-size: var(--step-2);
                    font-weight: var(--fw-bold);
                    text-transform: uppercase;
                    letter-spacing: .05em;
                    line-height: 1.2;
                    color: var(--heading-text-color);
                }

                .service-img-wrapper {
                    width: 15rem;
                    aspect-ratio: 1;
                    border: 8px solid var(--clr-neutral-100);
                    border-radius: 50%;
                    overflow: clip;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
    }

    /* PRICING PLANS */
    .pricing-plans {
        padding-block: var(--padding-block);

        .pricing-plan {
            --_plan-bg-clr: ;
            display: grid;
            justify-items: center;
            gap: var(--space-m);
            padding-block: var(--space-xl);
            padding-inline: var(--space-m-l);
            background-color: hsl(from var(--section-background-color) h s calc(l + 4));
            text-align: center;
            border: 2px solid hsl(from var(--section-background-color) h s calc(l + 12));

            &.popular {
                background-color: hsl(from var(--clr-accent-400)h s l / .04);
                border: 2px solid var(--clr-accent-400);
            }

            .pricing-plan-title {
                position: relative;
                font-size: var(--step-2);
                letter-spacing: .05em;
                width: 100%;

                &.popular::before {
                    position: absolute;
                    content: attr(most-popular);
                    inset: 0;
                    top: -1.2em;
                    font-size: var(--step--1);
                    font-weight: inherit;
                    letter-spacing: .2em;
                    color: var(--accent-text-color);
                }
            }

            .pricing-plan-cost {
                font-size: var(--step-3);
                font-weight: var(--fw-bold);
                line-height: 1.2;

                span {
                    display: block;
                }

                .small {
                    font-size: var(--step-0);
                    text-transform: uppercase;
                    letter-spacing: .05em;
                }
            }

            .pricing-plan-list {
                width: 100%;

                li {
                    padding-block: var(--space-xs);
                    border: 1px solid hsl(from var(--clr-neutral-100) h s l / .08);
                    border-right: none;
                    border-left: none;

                    & + li {
                        border-top: none;
                    }
                }
            }
        }
    }

    /* GALLERY */
    .gallery {
        --section-background-color: var(--clr-neutral-900);
        padding-block: var(--padding-block);

        .secondary-heading {
            text-align: center;
        }

        .gallery-grid {
            /* 0 without unit doesn't work! */
            --grid-gap: 0rem;

            grid-column: breakout;

            container-type: inline-size;

            .gallery-img-wrapper {
                overflow: clip;

                &.row-span-2 {
                    grid-row: span 2;
                }

                &.gallery-img-large-1,
                &.gallery-img-large-2 {
                    contain: size;

                    @container (width >=calc(960 / 16 * 1rem)) and (width < calc(1280 / 16 * 1rem)) {
                        grid-row: span 2;
                    }
                }

                &.gallery-img-large-1 {
                    @container (width >=calc(1280 / 16 * 1rem)) {
                        grid-column: span 2;
                    }
                }

                &.gallery-img-large-2 {
                    @container (width >=calc(1280 / 16 * 1rem)) {
                        grid-column: span 2;
                        grid-row: span 2;
                    }
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
    }

    /* TRAINERS */
    .trainers {
        padding-block: var(--padding-block);

        .trainers-grid {
            --grid-max-col-count: 3;
            --grid-min-col-size: 22.5rem;
            grid-auto-rows: auto;

            .trainer {
                position: relative;
                display: grid;
                grid-template-rows: 1fr repeat(5, auto);
                /* grid-template-rows: subgrid; */
                /* align-items: end; */
                /* grid-row: span 6; */
                gap: 0;
                border: .4em double hsl(from var(--section-background-color) h s calc(l + 12));
                overflow: clip;
                container-type: inline-size;

                @container (width < calc(480 / 16 * 1rem)) {

                    &::before {
                        grid-column: 1;
                        grid-row: 1;

                        content: "";
                        height: 25rem;
                    }
                }

                &::after {
                    grid-column: 1;
                    grid-row: 2 / -1;

                    position: absolute;
                    content: "";
                    inset: 0;
                    background-color: hsl(from var(--clr-black) h s l / .8);
                    backdrop-filter: blur(12px) brightness(1.1);
                    border-top: 4px solid var(--clr-accent-400);
                    rotate: 2deg;
                    scale: 2;
                    transform-origin: top center;
                }

                & > *:not(.trainer-img-wrapper) {
                    grid-column: 1;
                    margin-inline: var(--space-s-m);
                    z-index: 2;
                }

                .trainer-name {
                    grid-row: 2;
                    padding-block-start: var(--space-xl);
                    font-size: var(--step-1);
                    text-align: center;
                    line-height: 1.2;
                    letter-spacing: .04em;
                }

                .trainer-title {
                    grid-row: 3;
                    text-transform: uppercase;
                    font-weight: var(--fw-bold);
                    text-align: center;
                    letter-spacing: .15em;
                    margin-block: .25rem 3rem;
                }

                .trainer-phone,
                .trainer-email {
                    margin-block-end: 1rem;
                }

                .trainer-phone {
                    grid-row: 4;
                }

                .trainer-email {
                    grid-row: 5;

                }

                .trainer-social {
                    grid-row: 6;
                    margin-block-end: var(--space-s-m);
                }

                .trainer-img-wrapper {
                    grid-column: 1;
                    grid-row: 1 / -1;

                    height: 100%;

                    .trainer-img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
    }

    /* OPENING HOURS */
    .opening-hours {
        --section-background-color: var(--clr-neutral-700);
        border-radius: var(--space-l-xl);
        overflow: clip;

        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: inherit;

        .opening-hours-text-wrapper {
            grid-column: 1 / -1;
            grid-row: 1;
            z-index: 2;

            display: grid;
            grid-template-columns: inherit;
            row-gap: var(--space-m);
            padding-block: calc(var(--padding-block) * 1.5);
            text-align: center;

            & > * {
                grid-column: content;
            }

            .opening-hours-heading {
                font-weight: var(--fw-black);
                letter-spacing: .04em;
            }

            .opening-hours-list {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: var(--space-s) var(--space-l);
                font-size: var(--step-1);

                li {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    align-items: center;
                    column-gap: .5ch;

                    .day {
                        text-transform: uppercase;
                        letter-spacing: .04em;
                    }
                }
            }
        }

        .opening-hours-img-wrapper {
            grid-column: 1 / -1;
            grid-row: 1;
            height: 100%;
            contain: size;
            overflow: clip;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                filter: grayscale(100%) opacity(15%) blur(2px);
            }
        }
    }

    /* CONTACT */
    .contact {
        padding-block: var(--space-xl-2xl);
        padding-inline: var(--space-s-m);

        .contact-flex {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: var(--space-m);
        }
    }

    /* MAIN FOOTER */
    .main-footer {
        background-color: var(--footer-background-color);

        & > .main-footer-content {
            grid-column: full-width;
            grid-row: 1;
            z-index: 2;
            display: grid;
            grid-template-columns: inherit;
            justify-items: center;
            padding-block-start: var(--padding-block);
            padding-block-end: var(--space-l-xl);
            background-color: hsl(from var(--footer-background-color) h s l / .8);

            & > * {
                grid-column: content;
            }

            .footer-primary-nav {
                margin-block-start: var(--space-m-l);
                margin-block-end: var(--space-xl-2xl);

                .nav-list {
                    justify-content: center;
                }
            }

            .copyright {
                font-size: var(--fs-footer);
                text-transform: uppercase;
                letter-spacing: .07em;
                opacity: .8;
            }
        }

        .main-footer-img-wrapper {
            grid-column: full-width;
            grid-row: 1;
            width: 100%;
            height: 100%;
            contain: size;
            overflow: clip;

            @media (width >=calc(500 / 16 * 1rem)) {
                width: 50%;
            }

            &.img-1 {
                justify-self: start;
            }

            &.img-2 {
                display: none;
                justify-self: end;

                @media (width >=calc(500 / 16 * 1rem)) {
                    display: block;
                }

                .img-flip {
                    scale: -1 1;
                }
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}