.jax {

    --jax-blue-dark: #002d62;
    --jax-blue-mid: #00519b;
    --jax-blue-light: #009fe1;
    --jax-blue-lighter: #198bc6;

    --jax-yellow: #fceb02;
    --jax-orange: #ffa800;

    --page-margin: min(7px, 1.4vw);
    --content-width: min(1400px, 100vw - (var(--subsectionSpacing-width) * 2));

    h3 {
        margin-bottom: 2rem;
        text-transform: none;
    }
    h3:has(+p) {
        margin-bottom: 0;
        text-transform: none;
    }
    h3+p {
        margin-top: 0;
    }

    .research {
        
        .legacy .content-group {
            padding: clamp(0.5rem, 0.25rem + 3vw, 3.4rem);
            background-color: #e5e5e5;

            &>:first-child {
                padding-bottom: 0.5em;
                border-bottom: 1px solid black;
            }
        }
        .legacy-grid {
            padding-top: 0.625rem;
            display: flex;
            flex-direction: column;
            gap: 1.6rem;
        }

        .legacy-grid-group {
            display: grid;
            gap: 1.6rem;
            align-items: stretch;
            justify-items: stretch;

            &:first-child {
                grid-template-columns: 0.380952fr 0.119048fr 0.119048fr 0.380952fr;
                grid-template-rows: auto auto 1fr;

                img:nth-child(1) {
                    grid-column: 1 / span 2;
                    grid-row: 1 / 2;
                }
                img:nth-child(2) {
                    grid-column: 3 / span 2;
                    grid-row: 1 / 2;
                }
                img:nth-child(3) {
                    grid-column: 1 / span 4;
                    grid-row: 2 / 3;
                }
                img:nth-child(4) {
                    grid-column: 1 / span 3;
                    grid-row: 3 / 4;
                }
                img:nth-child(5) {
                    grid-column: 4 / 5;
                    grid-row: 3 / 4;
                }
            }
            &:last-child {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto 1fr;
            }

            img {
                width: 100%;
                height: auto;
                justify-self: stretch;
                align-self: stretch;
                object-fit: cover;
                object-position: center;
            }

            @media (width > 768px) {

                &:first-child {
                    grid-template-columns: 0.3fr 0.3fr 0.26fr 0.16fr;
                    grid-template-rows: auto 1fr;

                    img:nth-child(1) {
                        grid-column: 1 / 2;
                        grid-row: 1 / span 2;
                    }
                    img:nth-child(2) {
                        grid-column: 2 / 3;
                        grid-row: 1 / span 2;
                    }
                    img:nth-child(3) {
                        grid-column: 3 / span 2;
                        grid-row: 1 / 2;
                    }
                    img:nth-child(4) {
                        grid-column: 3 / 4;
                        grid-row: 2 / 3;
                    }
                    img:nth-child(5) {
                        grid-column: 4 / 5;
                        grid-row: 2 / 3;
                    }
                }
                &:last-child {
                    grid-template-columns: 0.3fr 0.325fr 0.2fr 0.195fr;
                    grid-template-rows: 1fr;
                }
            }
        }
    }

    .concept-development {

        .design-assets {
            color: white;

            background: linear-gradient(86deg, #009FE1 0.56%, #008BCF 17.24%, #006BB3 51.58%, #0058A1 79.06%, #00519B 98.69%);

            .design-assets-grid {
                display: grid;
                grid-template-columns: 3fr 2.5fr;
                gap: 5rem 3rem;
                align-items: center;
                text-align: center;

                .asset:nth-child(3) {
                    grid-column: 1 / span 2;
                    grid-row: 2 / 3;
                }

                @media (width > 800px) {
                    grid-template-columns: 3fr 3.5fr 6fr;

                    .asset:nth-child(3) {
                        grid-column: 3 / 4;
                        grid-row: 1 / 2;
                    }

                }
            }
        }

        .pattern {
            color: white;

            .section-bg {
                position: relative;
                height: 500px;
                background-size: cover;
                background-position: center;
                background:linear-gradient(54deg, #014F97 1.04%, #004A8F 5.88%, #003D7B 21.38%, #00336C 39.78%, #002E64 61.09%, #002D62 97.9%);

                img {
                    width: 100%;
                    height: 500px;
                    object-fit: cover;
                    object-position: center;
                    z-index: 0;
                }
            }
        }

        .colors-grid {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(8, 1fr);
            grid-template-areas: 
                "blue-mid"
                "blue-light"
                "yellow"
                "blue-lighter"
                "blue-dark"
                "orange"
                "white"
                "black";
            gap: 1rem;
            align-items: stretch;
            justify-items: stretch;

            .color-chip {
                height: auto;
                padding: 2rem 3rem;
                line-height: 1.2;
                font-size: 0.875rem;

                &.blue-mid {
                    grid-area: blue-mid;
                    background-color: var(--jax-blue-mid);
                }
                &.blue-light {
                    grid-area: blue-light;
                    background-color: var(--jax-blue-light);
                }
                &.yellow {
                    grid-area: yellow;

                    color: black;
                    background-color: var(--jax-yellow);

                    p {
                        margin: 0;
                        width: min(15rem, 100%);
                    }
                }
                &.blue-lighter {
                    grid-area: blue-lighter;
                    background-color: var(--jax-blue-lighter);
                }
                &.blue-dark {
                    grid-area: blue-dark;
                    background-color: var(--jax-blue-dark);
                }
                &.orange {
                    grid-area: orange;
                    color: white;
                    background-color: var(--jax-orange);
                    p {
                        margin: 0;
                        width: min(10rem, 100%);
                    }
                }
                &.white {
                    grid-area: white;
                    background-color: white;
                    border: 1px solid black;
                }
                &.black {
                    grid-area: black;
                    background-color: black;
                }
            }

            @media (width > 800px) {

                grid-template-columns: 1fr 1fr;
                grid-template-rows: repeat(4, 1fr);
                grid-template-areas: 
                    "blue-mid blue-light"
                    "yellow blue-lighter"
                    "blue-dark orange"
                    "white black";
    
                .color-chip {
                    /* border-radius: 1rem; */
                }

                .blue-mid, .yellow, .blue-dark, .white {
                    border-top-right-radius: 1rem;
                    border-bottom-right-radius: 1rem;
                }
                .blue-light, .blue-lighter, .orange, .black {
                    border-top-left-radius: 1rem;
                    border-bottom-left-radius: 1rem;
                }

            }


            @media (width > 1024px) {

                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: repeat(3, 1fr);
                grid-template-areas: 
                    "blue-mid blue-mid blue-light blue-light yellow yellow"
                    "blue-lighter blue-lighter blue-dark blue-dark orange orange"
                    "white white white black black black";
    
                .blue-mid, .blue-lighter, .white {
                    border-top-right-radius: 1rem;
                    border-top-left-radius: 0;
                    border-bottom-right-radius: 1rem;
                    border-bottom-left-radius: 0;
                }
                .yellow, .orange, .black {
                    border-top-right-radius: 0;
                    border-top-left-radius: 1rem;
                    border-bottom-right-radius: 0;
                    border-bottom-left-radius: 1rem;
                }

                .blue-light, .blue-dark {
                    border-radius: 1rem;
                }

            }
        }        
    }

    .obviously {
        font-family: obviously, sans-serif;
    }
    .poppins {
        font-family: poppins, sans-serif;
    }
    .bold {
        font-weight: 700;
    }
    .extrabold {
        font-weight: 800;
    }

    .typography {
        container-type: inline-size;
        container-name: typography;
        width: min(1400px, 100%);
        margin: 0 auto;
    }

   .typography {

        .typography-grid {
            width: 100%;

            &>* {
                margin: 0.5rem 0;
                padding: 0;
                width: 100%;
                line-height: 1.1111;
                text-grow: per-line scale;
            }
            &>p:nth-child(1) {
                font-size: 5.45cqi;
                font-weight: 800;
                color: var(--jax-blue-lighter);
            }
            &>p:nth-child(2) {
                font-size: 16.5cqi;
                font-weight: 800;
                color: var(--jax-blue-dark);
            }
            &>p:nth-child(3) {
                font-size: 17.6cqi;
                font-weight: 800;
                -webkit-text-stroke: 4px var(--jax-blue-dark);
                color: transparent; 
            }
            &>p:nth-child(4) {
                margin-top: 2rem;
                font-size: 7cqi;
                color: var(--jax-blue-dark);
            }
        }
    }

    .club {

        .logos-old-new {
            border-top: 1px solid #dadada;
            border-bottom: 1px solid #dadada;

            .content-group {
                display: grid;
                gap: 1px;
                grid-template-columns: repeat(auto-fit, minmax( min(320px, 100%), 1fr));
                align-items: end;
                justify-items: stretch;
                background-color: #dadada;
            }

            .logo {
                margin: 0;
                padding: 0;
                background-color: white;
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: 24rem 6rem;
                gap: 0;

                img {
                    width: min(360px, 60%);
                    height: auto;
                    justify-self: center;
                    align-self: center;
                }
                figcaption {
                    font-family: var(--fontFamily-boldExtended);
                    font-stretch: var(--fontStretch-expanded);
                    font-size: clamp(1rem, 0.5rem + 1vw, 1.5rem);
                    font-weight: 800;
                    line-height: 1.5;
                    text-align: center;
                    text-transform: uppercase;
                    color: #999;
                }
            }
        }

        .brandmark-pattern {

            .section-content {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .brandmark {
                margin-inline: auto;
                width: min(360px, 80%);
                height: auto;
                z-index: 10;
            }

            .section-bg {
                position: relative;
                height: 600px;
                background-size: cover;
                background-position: center;
                background:linear-gradient(54deg, #014F97 1.04%, #004A8F 5.88%, #003D7B 21.38%, #00336C 39.78%, #002E64 61.09%, #002D62 97.9%);

                img {
                    width: 100%;
                    height: 600px;
                    object-fit: cover;
                    object-position: center;
                    z-index: 0;
                }
            }
        }
    }

    .execution {

        figure {
            margin-block: 0;
            margin-inline: auto;
        }

        .zone-1 figure {
            width: min(820px, 100%);
        }

        .zone-3 figure {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax( min(240px, 100%), 1fr));
            gap: 1.5rem;
        }
        .zone-4 figure {
            width: min(calc(804px + 3rem), 100%);
            display: grid;
            grid-template-columns: 0.279279fr 0.720721fr;
            gap: 1.5rem;

            img:nth-child(3) {
                grid-column: 1 / span 2;
            }

            @media (width > 640px) {
                grid-template-columns: 0.154229fr 0.39801fr 0.452736fr;

                img:nth-child(3) {
                    grid-column: auto;
                }
            }
        }

    }

    .summary {
        color: white;
        background-color: var(--jax-blue-dark);
    }

        .subsection:has(.section-bg) {
        display: grid;
        grid-template-columns: [section-start] var(--subsectionSpacing-width) 1fr [content-start content-left] var(--content-width) [content-right content-end] 1fr var(--subsectionSpacing-width) [section-end];
        grid-template-rows: [section-start content-start] 1fr [section-end content-end];

        .section-content {
            margin-block: calc(var(--subsectionSpacing-height)/2);
            grid-area: content;
            justify-self: stretch;
            align-self: stretch;
            z-index: 1;
        }
    }
    .section-bg {
        grid-area: section;
        justify-self: stretch;
        align-self: stretch;
        z-index: 0;

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;

        & > img {
            grid-column: 1/1;
            grid-row: 1/1;
            justify-self: stretch;
            align-self: stretch;
            object-fit: cover;
            object-position: center;
        }
    }
}