.pretium {

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

    --color-pretium-green: #225651;
    --color-pretium-copper: #e6f0ef;

    .pretium-green {
        color: var(--color-pretium-green);
    }
    .pretium-copper {
        color: var(--color-pretium-copper);
    }


    .basis-grotesque {
        font-family: "BasisGrotesquePro";
        font-style: normal;
        font-stretch: normal;
        font-weight: 400;
    }
    .value-serif-pro {
        font-family: "ValueSerifProVar";
        font-style: normal;
        font-stretch: normal;
        font-weight: 400;
    }

    h3 {
        margin-bottom: 0;
        text-transform: none;

        & + * {
            margin-top: 0;
        }
    }

    .hero-image {
        position: relative;
    }

    .introduction .content-group>* {
        width: min(52rem, 100%);
        margin-left: 0;
        font-family: var(--fontFamily-boldExtended);
        font-stretch: var(--fontStretch-normal);
        font-style: italic;
    }

    .verbal-identity {

        .section-introduction {
            margin-bottom: calc(var(--subsectionSpacing-height)/2);
        }
        .taglines {
            margin-bottom: calc(var(--subsectionSpacing-height)/2);
        }
        .narrative {
        }
    }

    .voice-is-list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 4.9rem;

        li {
            text-align: center;
            &:first-child {
                text-align: left;
            }
            &:last-child {
                text-align: right;
            }
        
        }
    }

    .narrative {
        width: min(640px, 100%);
        margin: 4rem auto 0 auto;

        .lead {
            font-size: 2.4rem;
            line-height: 0.583;
        }
    }

    .logos-old-new {
        border-top: 1px solid #dadada;
        border-bottom: 1px solid #dadada;
        margin-bottom: calc(var(--subsectionSpacing-height)/2);

        .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: 16rem 4rem;
            gap: 0;

            img {
                width: min(468px, 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;
            }
        }
    }

    .strategy-collage {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: end;
        gap: 24px;
        margin: 0 auto;

        img {
            height: auto;
            flex: 1 1 auto;
        }

        @media (width > 800px) {
            img {
                height: auto;

                &:nth-child(1) {
                    width: round( down, calc( 344 / 1440  * 100%), 0.1%);
                }
                &:nth-child(2) {
                    width: round( down, calc( 402 / 1440  * 100%), 0.1%);
                }
                &:nth-child(3) {
                    width: round( down, calc( 630 / 1440  * 100%), 0.1%);
                }
                &:nth-child(4) {
                    width: round( down, calc( 470 / 1440  * 100%), 0.1%);
                }
                &:nth-child(5) {
                    width: round( down, calc( 370 / 1440  * 100%), 0.1%);
                }
                &:nth-child(6) {
                    width: round( down,  calc( 536 / 1440  * 100%), 0.1%);
                }
            }
        }
    }


    .verbal-identity-poster {

        .section-bg  {
            background-color: var(--color-pretium-green);
        }

        .section-content {
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: space-between;
            text-align: left;
            gap: 4rem;
            color: white;
        }

        .heading-verbal-identity-poster {
            margin: 0;
            font-size: 2.4rem;
            line-height: 0.625;
        }
        .sub-heading {
            margin: 0;
            font-size: 4.8rem;
            line-height: 1;
        }
        .pretium-is {
            margin: 0;
            font-size: 1.2rem;
            line-height: 1.25;
            width: min(600px, 100%);
        }
    }

    .brandmark-pattern {
        .section-content {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .brandmark {
            margin: 0 auto;
            width: min(558px, 38.75%);
            height: auto;
        }
    }

    .visual-mock-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        figure {
            margin: 0;
            padding: 0;
        }
        figcaption {
            margin-top: 2rem;

            & > * {
                margin-top: 0;
            }
            & > *:last-child {
                margin-bottom: 0;
            }
            & > h3 {
                margin-bottom: 0;
            }
        }

        &>*:last-child {
            margin-bottom: 2rem;
        }

        @media (width > 800px) {

            display: grid;
            grid-template-columns: repeat(2, 1fr);

            .full {
                grid-column: span 2;
            }
            .half {
                grid-column: span 1;
            }
            .tall {
                grid-row: span 2;
            }

            .visual-mock-04 {
                figcaption {
                    width: max(620px, 50%)
                }
            }
            .visual-mock-09 {
                figcaption {
                    width: max(620px, 50%)
                }
            }
            .visual-mock-11 {
                display: grid;
                grid-template-columns: max(480px, 64%) 1fr;
                gap: 2rem;
                align-items: end;
            }
        }
    }


    .summary {
        color: white;
        background-color: black;
        border-bottom: 1px solid white;
    }



    .subsection:has(.section-bg) {
        display: grid;
        grid-template-columns: [section-start] var(--subsectionSpacing-width) 1fr [content-start] var(--content-width) [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;
        }
    }
}