.bedrock-strategy-media-planning {

    --bedrock--green: #144733;
    --bedrock--green-dark: #342e1f;
    --bedrock--orange: #e15829;
    --bedrock--orange-dark: #974608;

    .subtitle {
        font-family: "Univers63BoldExtended", sans-serif;
        font-size: clamp(1.25rem, 0.5rem + 1.78571vw, 1.5rem);
        font-stretch: var(--fontStretch-expanded);
        font-weight: 400;
        line-height: 1.1;
    }
    
    .photo-collage-neighborhood {

        .subsection {
            padding-top: 0 !important;
        }

        .content-group {
            --page-margin-total: calc(2 * var(--subsectionSpacing-width));
            --column-width-percent: calc( (100% - var(--page-margin-total)) / 7 );
            --column-width: min(200px, var(--column-width-percent));


            margin: 0 auto;
            width: min(100%, 1920px);            
            display: grid;

            grid-template-columns:
                [page-start left-half-start] 
                    var(--subsectionSpacing-width)
                    [left-content-edge-start]
                        1fr 
                    [content-column1-start] 
                        var(--column-width) 
                    [content-column1-end content-column2-start] 
                        var(--column-width) 
                    [content-column2-end content-column3-start] 
                        var(--column-width) 
                    [content-column3-end content-column4-start] 
                        var(--column-width) 
                    [content-column4-end content-column5-start] 
                        var(--column-width)
                    [content-column5-end content-column6-start] 
                        var(--column-width) 
                    [content-column6-end content-column7-start] 
                        var(--column-width) 
                    [content-column7-end]
                        1fr 
                    [right-content-edge-end]
                    var(--subsectionSpacing-width) 
                [right-half-end page-end];
            grid-template-rows:
                auto                
                auto
                3rem
                auto;
            gap: 3rem 0;
        }

        .photo-01 {
            grid-column-start: page-start;
            grid-column-end: content-column4-end;
            grid-row-start: 1;
            grid-row-end: 2;
            background-color: var(--bedrock--green);

            grid-template-columns: subgrid;

            img {
                grid-column-start: left-content-edge-start;
                grid-column-end: content-column4-end;
                margin: 3rem 2rem 3rem 0 !important;
                width: calc(var(--subsectionSpacing-width) + 1rem)
                height: auto;
                justify-self: end;
            }
        }
        .photo-02 {
            grid-column-start: content-column4-start;
            grid-column-end: content-column6-end;
            grid-row-start: 1;
            grid-row-end: 2;
            margin-top: 4rem;
        }
        .photo-03 {
            grid-column-start: content-column1-start;
            grid-column-end: content-column4-end;
            grid-row-start: 2;
            grid-row-end: 4;
        }
        .photo-04 {
            grid-column-start: content-column4-start;
            grid-column-end: content-column7-end;
            grid-row-start: 2;
            grid-row-end: 4;
        }
        .photo-05 {
            grid-column-start: content-column4-start;
            grid-column-end: content-column7-end;
            grid-row-start: 3;
            grid-row-end: 4;
        }
        .photo-06 {
            grid-column-start: content-column2-start;
            grid-column-end: content-column4-end;
            grid-row-start: 3;
            grid-row-end: 5;
        }
        .photo-07 {
            grid-column-start: content-column4-start;
            grid-column-end: content-column7-end;
            grid-row-start: 3;
            grid-row-end: 5;
        }
    }


    .analysis-reporting {
        color: white;
        background-color: var(--bedrock--green-dark);
    }
    

    .campaign-strategy {
        color: white;
        background-color: var(--bedrock--green);
    }   

    .media-planning .app-ux {
        margin-top: calc(var(--subsectionSpacing-height) / 2);
        color: white;
        background-color: var(--bedrock--orange-dark);
    }
    .app-ux-mockup {
        display: block;
        width: min(100%, 1000px);
        margin-left: auto;
        transform: translateY(-12%);
    }
    .media-planning-caption {
        margin: 0;
        max-width: 28ch;
        font-family: DINNextLTPro, sans-serif !important;
        font-size: clamp(1rem, 0.75rem + 1.42857vw, 3rem);
        line-height: 1.2;
        transform: translateY(-2em);
    }

    .campaign-strategy {
        color: white;
        background-color: var(--bedrock--green);
    }
    .campaign-strategy-graphic {
        img {
            display: block;
            width: min(100%, 1920px);
            height: 750px;
            object-fit: cover;
            object-position: center;
        }

        @media (width > 800px) {
            margin-top: -8rem;
        }
    }


    .creative-briefing-examples .content-group {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 0;
        align-items: stretch;

        .creative-briefing-page {
            font-family: DINNextLTPro, sans-serif !important;
            padding: 3rem;
            border: 1px solid black;
            overflow: visible;

            &:first-child {
                border-bottom: none;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 3rem 0;
            }
        }

        .downtown-detroit-living-heading {
            font-weight: 875;
            font-size: clamp(1.5rem, 0.75rem + 1.42857vw, 3rem);
        }
        .downtown-detroit-living-heading,
        .downtown-detroit-living-caption {
            margin-inline: 2rem;
        }
        .creative-briefing-page:last-child::before {
            display: block;
            content: "";
            position: absolute;
            top: -2rem;
            left: calc(50% - 2rem);
            transform-origin: 50% 50%;
            transform: rotate(90deg);
            width: 4rem;
            height: 4rem;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48"><rect width="48" height="48" fill="white"/><path d="M29.2,7.6l-2.7,2.9,12.3,11.4H1.2v4h37.5l-12.3,11.4,2.7,2.9,17.6-16.3L29.2,7.6Z" fill="black" /></svg>');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 2.5rem 2.5rem;
            z-index: 10;
        }



        @media (width > 768px) {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto;

            .creative-briefing-page {

                &:first-child {
                    border-bottom: 1px solid black;
                    border-right: none;
                }
            }
            .creative-briefing-page:last-child::before {
                transform: rotate(0deg);
                top: calc(50% - 2rem);
                left: -2rem;
            }
        }

        .result {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-bottom: 1.5rem;

            &:nth-child(even) {
                flex-direction: row-reverse;
            }

            img {
                display: block;
                flex-basis: 140px;
                flex-shrink: 1;
                flex-grow: 1;
                min-width: 140px;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }

    }

    .asset-credit {
        font-family: var(--fontFamily-extended);
        font-stretch: var(--fontStretch-expanded);
        max-width: 32ch;
        margin-bottom: 4rem;
    }
    .summary {
        color: white;
        background-color: var(--bedrock--orange);
    }
}