.bedrock-book-tower {

    --bedrock--gold: #94814B;
    --bedrock--blue: #173346;
    
    .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;
    }
    
    .book-tower-collage {

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

        .content-group {
            width: min(100%, 1920px);
            margin-inline: auto;
            background-image: url('/assets/work/bedrock/campaign-strategy-design/photos-illustration-bg.svg');
            background-position: center bottom;
            background-size: 100% auto;
            background-repeat: no-repeat;
        }

        .photo-collage {
            margin-block-end: 2rem;
        }

        @media (width > 460px) {

            .content-group {
                width: min(100%, 1920px);
                margin-inline: auto;
                background-image: url('/assets/work/bedrock/campaign-strategy-design/photos-illustration-bg.svg');
                background-position: center bottom;
                background-size: 100% auto;
                background-repeat: no-repeat;

                display: grid;

                grid-template-columns:
                    [page-start left-half-start]
                        1fr
                    [left-half-end right-half-start] 
                        1fr
                    [right-half-end page-end];
                grid-template-rows:
                    auto
                    auto
                    auto;
                gap: 0 10%;
            }

            .photo-collage {
                margin-block-end: 0;
            }
            .photo-01 {
                grid-column-start: page-start;
                grid-column-end: page-end;
                grid-row-start: 1;
                grid-row-end: 2;
                margin-block-end: min(6rem, 6vw);
            }
            .photo-02 {
                grid-column-start: left-half-start;
                grid-column-end: left-half-end;
                grid-row-start: 2;
                grid-row-end: 3;
                margin-block-end: min(6rem, 6vw);
            }
            .photo-03 {
                grid-column-start: right-half-start;
                grid-column-end: right-half-end;
                grid-row-start: 2;
                grid-row-end: 3;
                margin-block-start: min(6rem, 6vw);
            }
            .photo-04 {
                grid-column-start: left-half-start;
                grid-column-end: left-half-end;
                grid-row-start: 3;
                grid-row-end: 4;
                margin-block-end: min(6rem, 6vw);
            }
            .photo-05 {
                grid-column-start: right-half-start;
                grid-column-end: right-half-end;
                grid-row-start: 3;
                grid-row-end: 4;
                margin-block-start: min(6rem, 6vw);
            }

        }
    }

    .campaign-strategy {
        .photo-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;

            @media (width > 320px) {

                --gap: 1rem;
                --wide: calc(2fr + var(--gap));
                --narrow: 1fr;

                grid-template-columns: 1fr 1.1fr 1.1fr 1fr;
                grid-template-rows: 1fr 1fr;
                gap: var(--gap);

                img {
                    justify-self: stretch;
                    align-self: stretch;
                    object-fit: cover;
                }
                img:nth-child(1) {
                    grid-column: 1/3;
                    grid-row: 1/2;
                }
                img:nth-child(2) {
                    grid-column: 3/5;
                    grid-row: 1/2;
                }
                img:nth-child(3) {
                    grid-column: 1/2;
                    grid-row: 2/3;
                }
                img:nth-child(4) {
                    grid-column: 2/4;
                    grid-row: 2/3;
                }
                img:nth-child(5) {
                    grid-column: 4/5;
                    grid-row: 2/3;
                }
            }
        }
    }

    .media-plan {
        color: white;
        background-color: var(--bedrock--gold);
    }

    .creative-asset-development {

        .creative-asset-examples {
        
            .content-group {

                .banner {
                    color: white;
                    background-color: var(--bedrock--blue);
                    padding-block: 3rem;

                    &>img {                        
                        width: calc(100% - 1.5rem);
                        height: auto;
                        margin-block: 3rem;
                        margin-inline: auto;
                    }
                }

                .asset-03 {
                    img {
                        margin-block-start: 0;
                    }
                }

                @media (width > 640px) {

                    display: grid;
                    grid-template-columns: 8.4fr 5.55fr 5.55fr;
                    gap: max(2rem, 5vw);

                    .asset-01 {
                        grid-row: 2/3;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            object-position: center;
                        }
                    }
                    .asset-02 {
                        grid-row: 2/3;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            object-position: center;
                        }
                    }
                    .asset-03 {
                        grid-row: 2/3;                        
                        
                        display: grid;

                        .banner {
                            align-self: stretch;
                            color: white;
                            background-color: var(--bedrock--blue);
                            padding-block-start: 0;
                            padding-block-end: 2rem;
                        }

                        img {
                            margin-block: 0;
                            margin-inline: auto;
                            width: min(80%, 218px);
                            max-height: 720px;
                        }
                    }
                    .asset-04{
                        grid-column: 1/4;
                        grid-row: 3/4;

                        display: grid;
                        grid-template-columns: subgrid;
                        grid-template-rows: auto auto;

                        .banner {
                            grid-column: 1/2;
                            grid-row: 1/2;
                            padding-block: 3rem;
                            padding-inline: 1rem;
                            color: white;
                            background-color: var(--bedrock--blue);

                            img {
                                margin-inline: auto;
                                width: min(190px, 80%);
                            }
                        }

                        .mockup {
                            grid-column: 2/5;
                            grid-row: 1/3;
                            margin-block: 6rem;
                            margin-inline: 1.5rem;

                            width: calc(100% - 3rem);
                            height: auto;
                        }
                    }
                    .asset-05 {
                        grid-column: 1/4;
                        grid-row: 4/5;

                        display: grid;
                        grid-template-columns: subgrid;

                        .banner-01 {
                            grid-column: 1/4;
                            background-color: var(--bedrock--blue);
                            padding-block: 6rem;
                            img {
                                width: min(468px, 80%);
                                margin-inline: auto;
                            }
                        }

                        .tower {
                            grid-column: 1/2;
                            margin-top: -2.5rem;
                            mix-blend-mode: multiply;
                         }

                         .banner-group {
                            --gap:  max(2rem, 5vw);
                            grid-column: 2/4;

                            padding-block: var(--gap);

                            display: grid;
                            grid-template-columns: 1fr 2.5rem 1fr 1fr;
                            grid-template-rows: var(--gap) auto var(--gap) auto var(--gap) auto var(--gap);

                            .banner-02 {
                                grid-column: 1/3;
                                grid-row: 2/5;

                                color: white;
                                background-color: var(--bedrock--blue);
                                padding-block: 2rem 4rem;
                                img {
                                    width: min(204px, 90%);
                                    margin-inline: auto;
                                }
                            }
                            .banner-03 {
                                grid-column: 1/3;
                                grid-row: 6/8;

                                color: white;
                                background-color: var(--bedrock--blue);

                                padding-block: 4rem 6rem;
                                img {
                                    width: min(198px, 90%);
                                    margin-inline: auto;
                                }

                            }

                            .living {
                                grid-column: 2/5;
                                grid-row: 1/3;
                                mix-blend-mode: multiply;
                            }
                            .penthouse {
                                grid-column: 2/5;
                                grid-row: 4/7;
                                mix-blend-mode: multiply;
                            }

                         }

                    }
                    .asset-06 {
                        grid-column: 1/3;
                    }
                    .asset-07 {
                        grid-column: 1/4;
                    }
                }
            }
        }

        .world-class-architecture {
            grid-column: 1/4;
            grid-row: 1/2;
            padding-block: 3rem;
            background-color: var(--bedrock--blue);
            text-align: center;

            img {
                width: min(calc(60% - 4vw), 322px);
                height: auto;
                margin-inline: auto;
            }

            &::before {
                content: "";
                position: absolute;
                display: block;
                width: max(1rem, 2vw);
                top: 33%;
                left: 0;
                bottom: 33%;
                background-color: var(--bedrock--gold);
            }
            &::after {
                content: "";
                position: absolute;
                display: block;
                width: max(1rem, 2vw);
                top: 33%;
                right: 0;
                bottom: 33%;
                background-color: var(--bedrock--gold);
            }
        }



        .asset-13 {
            width: min(1920px, 100%);
            margin-inline: auto;
        }
    }

    .media-placement {
        color: black;
        background-color: transparent;
    }

    .tracking-analytics {
        color: white;
        background-color: var(--bedrock--blue);
    }

    .asset-credit {
        font-family: var(--fontFamily-extended);
        font-stretch: var(--fontStretch-expanded);
        max-width: 32ch;
        margin: 1.5rem 0;

        &:nth-child(2) {
            margin-bottom: 5rem;
        }
    }

    .summary {
        color: white;
        background-color: var(--bedrock--blue);
        background-image: url('/assets/work/bedrock/campaign-strategy-design/summary-bg.svg');
        background-repeat: repeat-x;
        background-position: top center;
        background-size: auto 160px;
    }
}