.text-with-image {
    + [class*="-bg"] {
        margin-top: var(--spacing-6xl);

        @media screen and (max-width: 991px) {
            margin-top: var(--spacing-2xl);
        }
        @media screen and (max-width: 576px) {
            margin-top: var(--spacing-xl);
        }
    }
    .row {
        --bs-gutter-x: 130px;

        @media screen and (max-width: 1500px) {
            --bs-gutter-x: 100px;
        }
        @media screen and (max-width: 1200px) {
            --bs-gutter-x: 60px;
        }
    }
    .image-left {
        flex-direction: row-reverse;
    }
    .text-col {
        display: flex;
        align-items: center;

        .text {
            max-width: 760px;

            @media screen and (max-width: 991px) {
                max-width: none;
            }
            *:first-child {
                margin-top: 0;
            }
            *:last-child {
                margin-bottom: 0;
            }
            h3 {
                font-weight: 700;
                margin-top: 45px;

                @media screen and (max-width: 1500px) {
                    margin-top: 35px;
                }
                @media screen and (max-width: 991px) {
                    margin-top: 25px;
                }
            }
            p {
                line-height: 1.4;
            }
            ul, ol {
                padding-left: 25px;
                columns: 2;
                gap: 50px;
                font-size: 2.8rem;

                @media screen and (max-width: 1500px) {
                    font-size: 2.2rem;
                }
                @media screen and (max-width: 1200px) {
                    columns: 1;
                }
                @media screen and (max-width: 991px) {
                    columns: 2;
                    font-size: 2rem;
                }
                @media screen and (max-width: 576px) {
                    columns: 1;
                    font-size: var(--font-size-sm);
                }
            }
        }
    }
    .image-col {
        img {
            display: block;
            width: 100%;
            border-bottom: 20px solid var(--color-accent);

            @media screen and (max-width: 991px) {
                width: 100%;
            }
            @media screen and (max-width: 768px) {
                border-bottom: 15px solid var(--color-accent);
            }
            @media screen and (max-width: 576px) {
                border-bottom: 10px solid var(--color-accent);
            }
        }
        .image-caption {
            font-size: 22px;
            margin-top: 2.5rem;
            margin-bottom: 0;

            @media screen and (max-width: 1500px) {
                font-size: 16px;
                margin-top: 2rem;
            }
            @media screen and (max-width: 768px) {
                font-size: 14px;
                margin-top: 1.5rem;
            }
            @media screen and (max-width: 576px) {
                font-size: 13px;
                margin-top: 1rem;
            }
        }
    }
}