.bedrock-strategy-design {

    --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;
    }


    .hero-image {
        --content-width: min(1400px, 97.2vw);

        display: grid;
        grid-template-columns: [page-start] 1.4vw 1fr [content-start] var(--content-width) [content-end] 1fr 1.4vw [page-end];

        .bg {
            grid-column: page;
            grid-row: 1/2;
        }
        .card {
            grid-column: content;
            grid-row: 1/2;
            align-self: end;
            justify-self: end;
            margin-bottom: 4rem;
            width: min(720px, 90%);
            height: auto;
        }
    }

    
    .website-tablet-mockup .content-group {


        --page-margin: 7px;


        @media (width <= 640px) {

            display: grid;
            gap: 1rem 0;
            grid-template-columns: [page-start] 7px [content-start] 1fr [content-end] 7px [page-end];

            .tablet-mock-bg-1,
            .tablet-mock-bg-2,
            .tablet-mock-bg-3 {
                display: none;
            }

            .tablet-mock-1,
            .tablet-mock-2,
            .tablet-mock-3,
            .tablet-mock-4 {
                grid-column: content;
                grid-row: unset;
            }
            
        }

        @media (width > 640px) {

            --page-margin: min(20px, 1.4vw);
            --column-width: min(350px, 24.3vw);
            --column-width-narrow: min(245px, 15.6vw);
            --column-width-wide: min(385px, 26vw);

            display: grid;
            gap: 0;
            grid-template-columns: 
                [page-start] 
                    var(--page-margin) 
                    [content-edge-start] 1fr 
                        [content-column1-start] var(--column-width-narrow) 
                        [content-column1-end content-column2-start] var(--column-width-wide) 
                        [content-column2-end content-column3-start] var(--column-width-wide) 
                        [content-column3-end content-column4-start] var(--column-width-wide)
                        [content-column4-end] 1fr 
                    [content-edge-end]
                    var(--page-margin) 
                [page-end];

            grid-template-rows:
                calc(0.6 * var(--column-width-wide)) /* 1-2 */
                calc(0.1 * var(--column-width-wide)) /* 2-3 */
                calc(0.9 * var(--column-width-wide)) /* 3-4 */
                calc(0.15 * var(--column-width-wide)) /* 4-5 */
                calc(0.125 * var(--column-width-wide)) /* 5-6 */
                calc(0.125 * var(--column-width-wide)) /* 6-7 */
                calc(0.1 * var(--column-width-wide)) /* 7-8 */
                calc(0.25 * var(--column-width-wide)) /* 8-9 */
                calc(0.725 * var(--column-width-wide)) /* 9-10 */
                calc(0.45 * var(--column-width-wide)) /* 10-11 */
                calc(0.275 * var(--column-width-wide)) /* 11-12 */
                calc(0.375 * var(--column-width-wide)) /* 12-13 */
                calc(0.125 * var(--column-width-wide)) /* 13-14 */
                calc(0.245 * var(--column-width-wide)) /* 14-15 */
                calc(0.2 * var(--column-width-wide)) /* 15-16 */
                calc(0.55 * var(--column-width-wide)) /* 16-17 */
                calc(0.6 * var(--column-width-wide)) /* 17-18 */
                calc(0.12 * var(--column-width-wide)); /* 18-19 */

            --left-margin: clamp(1rem, 0.5rem + 9.5vw, 6rem);

            &::before {
                content: "";
                background-color: var(--bedrock--gold);
                grid-column: content-column1-start/page-end;
                grid-row: 4/13;
                justify-self: end;
                width: calc(100% - var(--left-margin));
                z-index: 2;
            }

            .tablet-mock {
                align-self: stretch;
                justify-self: stretch;
            }

            .tablet-mock-bg-1 {
                grid-column: page-start/content-column3-end;
                grid-row: 3/7;
                align-self: stretch;
                z-index: 3;

                img {
                    width: calc(100% - 0.5 * var(--left-margin));
                    height: 100%;
                }
            }
            .tablet-mock-bg-2 {
                grid-column: page-start/content-column3-end;
                grid-row: 2/8;
                z-index: 1;
                align-self: stretch;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .tablet-mock-bg-3 {
                grid-column: content-column1-start/content-column4-end;
                grid-row: 14/18;
                z-index: 1;

                align-self: center;

                img {
                    margin-inline: auto;
                    width: calc(100% - (2 * var(--left-margin)) );
                    height: 100%;
                }
            }
            .tablet-mock-1 {
                grid-column: content-column1-start/content-column3-end;
                grid-row: 1/5;
                z-index: 11;
                img {
                    width: calc(100% - 2rem);
                    height: auto;
                }
            }
            .logo-pillars {
                grid-column: content-column3-start/content-column4-end;
                grid-row: 6/10;
                z-index: 14;
                justify-items: center;

                img {
                    margin: 1rem 0 1rem calc( 1.4 * var(--left-margin) );
                    width: min(400px, 60%);
                    height: auto;
                }
            }
            .tablet-mock-2 {
                grid-column: content-column2-start/content-column3-end;
                grid-row: 9/12;
                z-index: 12;
            }
            .tablet-mock-3 {
                grid-column: content-column3-start/content-column4-end;
                grid-row: 11/16;
                z-index: 13;
            }
            .tablet-mock-4 {
                grid-column: content-column2-start/content-column3-end;
                grid-row: 15/19;
                z-index: 14;
            }
        }
    }

    .competitive-assessment {
        color: white;
        background-color: var(--bedrock--blue);
    }

    .stretegy-development {
        color: white;
        background-color: var(--bedrock--gold);
    }


    .playbook-leadership {

        .emails {

            margin-block-start: 6rem;
            margin-block-end: 6rem;
            max-width: 80rem;

            img {
                width: min(510px, 90%);
                height: auto;
                margin-block-end: 4rem;
                margin-inline: auto;

                border-radius: min(1rem, 6%);

                box-shadow: 0 5px 10px rgba(0, 0, 0, 20%);
            }

            @media (width > 640px) {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 2rem;

                img:nth-child(1) {
                    margin-block-start: 3rem !important;
                }
                img:nth-child(2) {
                    margin-block-start: 6rem !important;
                }
                img:nth-child(3) {
                    margin-block-start: 0;
                }
            }
        }
    }

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