.wp-block-content-grid {
    width: var(--desktop-container-width);
    margin: 0 auto;

    .grid-container {
        display: flex;
        flex-direction: column;
        gap: 18px;

        &.banner-pos-bottom {
            flex-direction: column-reverse;
        }

        @media (min-width: 768px) {
            gap: 45px;
        }
    }

    .banner-side-content-container {

        @media (min-width: 1024px) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 34px;
        }
    }

    .banners-container {
        flex: 2.25;
    }

    .banner {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 1.32;
        background-size: cover;
        background-position: center;
        border-radius: var(--mobile-border-radius);

        @media (min-width: 768px) {
            aspect-ratio: 3.11;
            border-radius: var(--desktop-border-radius);
        }

        &:nth-child(2) {
            margin-top: 18px;

            @media (min-width: 768px) {
                margin-top: 37px;
            }
        }

        .overlay {
            position: absolute;
            z-index: 3;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(0deg, rgba(71, 80, 92, 0.40) 0%, rgba(71, 80, 92, 0.40) 100%);
            border-radius: var(--mobile-border-radius);

            @media (min-width: 768px) {
                border-radius: var(--desktop-border-radius);
            }
        }

        .content-container {
            position: relative;
            z-index: 5;
            width: 80%;
            height: calc(100% - 36px);
            padding: 23px 0 13px 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 12px;

            @media (min-width: 768px) {
                width: 50%;
            }

            @media (min-width: 1024px) {
                height: calc(100% - 70px);
                padding: 38px 0 32px 38px;
                gap: 48px;
            }
        }

        .headline-container {

            .stat {
                color: var(--yellow);
                font-family: Gazpacho;
                font-size: 3.625rem;
                font-style: normal;
                font-weight: 900;
                line-height: 120%;

                @media (min-width: 1024px) {
                    font-size: 6rem;
                }
            }

            .headline {
                color: #FFF;
                font-family: "Museo Sans";
                font-size: 1.25rem;
                font-style: normal;
                font-weight: 600;
                line-height: 108%;
                transition: all 200ms ease-in;

                @media (min-width: 1024px) {
                    font-size: 2.24rem;
                }
            }

            .subheader {
                margin-top: 27px;
                color: #FFF;
                font-family: "Museo Sans";
                font-size: 0.875rem;
                font-style: normal;
                font-weight: 400;
                line-height: 120%;
                transition: all 200ms ease-in;

                @media (min-width: 1024px) {
                    font-size: 1.25rem;
                }
            }

            .pre-highlight,
            .post-highlight {
                color: #FFF;
                font-family: "Museo Sans";
                font-size: 1.875rem;
                font-style: normal;
                font-weight: 600;
                line-height: 120%;
                transition: all 200ms ease-in;
            }

            .highlight {
                color: var(--yellow);
                font-family: Gazpacho;
                font-size: 3.6875rem;
                font-style: normal;
                font-weight: 900;
                line-height: 113%;
            }
        } /* headline-container */

        .video-title-container {
            display: flex;
            align-items: center;
            gap: 19px;

            @media (min-width: 1024px) {
                gap: 31px;
            }

            svg {
                width: 48px;
                height: 48px;

                @media (min-width: 1024px) {
                    width: 92px;
                    height: 92px;
                }

                path,
                rect {
                    transition: all 200ms ease-in;
                }
            }

            .video_title {
                color: #FFF;
                font-family: "Museo Sans";
                font-size: 1.25rem;
                font-style: normal;
                font-weight: 600;
                line-height: 108%;
                transition: all 200ms ease-in;

                @media (min-width: 1024px) {
                    font-size: 2.24rem;
                }
            }
        } /* video-title-container */
    } /* banner */

    a.banner:hover {

        .headline-container {

            .headline,
            .subheader,
            .pre-highlight,
            .post-highlight {
                color: var(--yellow);
            }
        }

        .video-title-container {

            .play-container svg {

                path {
                    fill: var(--yellow);
                }

                rect {
                    stroke: var(--yellow);
                }
            }

            .video_title {
                color: var(--yellow);
            }
        }
    }

    .side-content {
        flex: 1;
        margin-top: 40px;

        @media (min-width: 1024px) {
            margin-top: 0;
        }

        .headline {
            color: #47505C;
            font-family: "Museo Sans";
            font-size: 1.5rem;
            font-style: normal;
            font-weight: 600;
            line-height: 120%;

            @media (min-width: 768px) {
                font-size: 2.1875rem;
            }
        }

        .body {
            margin-top: 20px;
            color: #141B34;
            font-family: "Museo Sans";
            font-size: 1.25rem;
            font-style: normal;
            font-weight: 400;
            line-height: 130%;
        }

        .link-container {
            display: block;
            margin-top: 20px;
            color: #47505C;
            font-family: "Museo Sans";
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;

            @media (min-width: 768px) {
                font-size: 1.25rem;
            }
        }

        .quote-icon {
            padding-bottom: 20px;

            path {
                fill: var(--steel-blue);
            }
        }

        .quote {
            color: #47505C;
            font-family: "Museo Sans";
            font-size: 2.125rem;
            font-style: normal;
            font-weight: 600;
            line-height: 111%;
        }

        .quoter-container {
            margin-top: 35px;
            display: flex;
            align-items: center;
            gap: 16px;

            .quoter {
                color: var(--steel-blue);
                font-family: "Museo Sans";
                font-size: 1.33rem;
                font-style: normal;
                font-weight: 700;
                line-height: 120%;
            }
        }
    } /* side-content */

    .blocks {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;

        @media (min-width: 768px) {
            grid-template-columns: 1fr 1fr;
            gap: 43px;
        }

        .block {
            position: relative;
            display: block;
            width: 100%;
            background-color: #fff;
            background-size: cover;
            background-position: center;
            border-radius: var(--mobile-border-radius);
            transition: all 200ms ease-in;

            @media (min-width: 768px) {
                border-radius: var(--desktop-border-radius);
            }

            .overlay {
                position: absolute;
                z-index: 3;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(0deg, rgba(71, 80, 92, 0.25) 0%, rgba(71, 80, 92, 0.25) 100%);
                border-radius: var(--mobile-border-radius);

                @media (min-width: 768px) {
                    border-radius: var(--desktop-border-radius);
                }
            }

            .block-inner-container {
                position: relative;
                z-index: 5;
                padding: 30px 32px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 114px;

                @media (min-width: 768px) {
                    padding: 55px 52px;
                    gap: 97px;
                }
            }

            .eyebrow {
                color: #47505C;
                font-family: "Museo Sans";
                font-size: 1.25rem;
                font-style: normal;
                font-weight: 400;
                line-height: 120%;
                transition: all 200ms ease-in;

                @media (min-width: 768px) {
                    font-size: 1.5rem;
                }
            }

            .stat {
                color: #4FA6D1;
                font-family: Gazpacho;
                font-size: 2.8125rem;
                font-style: normal;
                font-weight: 900;
                line-height: 120%;
                transition: all 200ms ease-in;

                &.long {
                    font-size: 1.5rem;
                }

                @media (min-width: 1024px) {
                    font-size: 4rem;

                    &.long {
                        font-size: 2.25rem;
                    }
                }

                @media (min-width: 1200px) {
                    font-size: 6rem;

                    &.long {
                        font-size: 4rem;
                    }
                }
            }

            .block-headline {
                margin-top: 14px;
                color: #47505C;
                font-family: "Museo Sans";
                font-size: 1.25rem;
                font-style: normal;
                font-weight: 400;
                line-height: 120%;
                transition: all 200ms ease-in;

                @media (min-width: 768px) {
                    margin-top: 22px;
                    font-size: 1.875rem;
                }
            }

            &.video {

                .block-headline {
                    margin-top: 4px;
                    color: #4FA6D1;
                    font-family: Gazpacho;
                    font-size: 1.75rem;
                    font-style: normal;
                    font-weight: 900;
                    line-height: 120%;

                    @media (min-width: 768px) {
                        font-size: 2.67rem;
                    }
                }
            }

            .block-subheader {
                margin-top: 18px;
                color: #47505C;
                font-family: "Museo Sans";
                font-size: 0.875rem;
                font-style: normal;
                font-weight: 400;
                line-height: 120%;
                transition: all 200ms ease-in;

                @media (min-width: 768px) {
                    margin-top: 31px;
                    font-size: 1.25rem;
                }
            }

            .video-title-container {
                width: 80%;
                display: flex;
                align-items: center;
                gap: 16px;

                @media (min-width: 768px) {
                    width: 70%;
                    gap: 26px;
                }

                svg {

                    rect {
                        transition: all 200ms ease-in;
                    }

                    path {
                        transition: all 200ms ease-in;
                    }
                }

                .video_title {
                    color: #47505C;
                    font-family: "Museo Sans";
                    font-size: 1.25rem;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 120%;
                    transition: all 200ms ease-in;

                    @media (min-width: 768px) {
                        font-size: 1.875rem;
                    }
                }
            } /* video-title-container */

            &.has-bg-image {

                .block-headline,
                .block-subheader {
                    color: #fff;
                }
            }
        } /* block */

        a.block:hover {

            .eyebrow,
            .block-headline,
            .block-subheader,
            .video_title {
                color: var(--yellow);
            }

            .play-container svg {

                rect {
                    stroke: var(--yellow);
                }

                path {
                    fill: var(--yellow);
                }
            }
        }

        a.block.video:hover {
            background-color: var(--deep-sky-blue);
        }
    } /* blocks */

    &.banner_content_two_blocks {

        .banner {
            aspect-ratio: auto;

            .headline-container {

                .subheader {
                    margin-top: 40px;

                    @media (min-width: 768px) {
                        margin-top: 80px;
                    }
                }
            }
        }
    }
}

.top-group {

    .wp-block-content-grid {

        .blocks {

            .block {
                background-color: #EDE6E1;
            }
        }
    }
}