body.page-color-blue section.hero_with_image {
        color: var(--light-blue);
    }

:is(body.page-color-blue section.hero_with_image) .wrap {
            background-color: var(--blue);
        }

section.hero_with_image {
    margin-bottom: 1.8rem;
}

@media screen and (max-width: 768px) and (orientation: portrait) {

section.hero_with_image {
        margin-bottom: 0.6rem;
}
    }

@media screen and (max-width: 768px) and (orientation: portrait) {

section.hero_with_image .container {
            padding-left: 0;
            padding-right: 0;
    }
        }

section.hero_with_image .wrap {
        background-color: var(--primary-color);
        padding: 1.8rem 0.72rem 1rem 0.72rem;
        display: flex;
        gap: 0.2rem;
        justify-content: space-between;
        align-items: center;
        border-radius: 0.48rem;
        overflow: hidden;

    }

@media screen and (max-width: 768px) and (orientation: portrait) {

section.hero_with_image .wrap {
            flex-direction: column;
            border-radius: 0;

            padding-top: 1.32rem;
            padding-left: .16rem;
            padding-right: .16rem;
            padding-bottom: .16rem;

    }
        }

:is(section.hero_with_image .wrap) .text-column {
            /* padding-left: 0.56rem; */
            width: 6.76rem;

        }

@media screen and (max-width: 768px) and (orientation: portrait) {

:is(section.hero_with_image .wrap) .text-column {
                width: 100%;
                padding-left: 0;
                padding-bottom: 0.48rem;

        }
            }

:is(:is(section.hero_with_image .wrap) .text-column) .label {
                margin-bottom: 0.24rem;
            }

:is(:is(section.hero_with_image .wrap) .text-column) .title {
                margin-bottom: 0.24rem;
            }

:is(:is(section.hero_with_image .wrap) .text-column) .buttons {
                display: flex;
                gap: 0.16rem;
                margin-top: 0.56rem;
            }

@media screen and (max-width: 768px) and (orientation: portrait) {

:is(:is(section.hero_with_image .wrap) .text-column) .buttons {
                    flex-direction: column;
                    margin-top: 0.24rem;
                    gap: 0.16rem;
            }
                }

:is(section.hero_with_image .wrap) .marquees-column {
            width: 6rem;
        }

@media screen and (max-width: 768px) and (orientation: portrait) {

:is(section.hero_with_image .wrap) .marquees-column {
                width: 100%;
        }
            }

:is(:is(section.hero_with_image .wrap) .marquees-column) img {
                display: block;
                width: 100%;
                height: auto;
                border-radius: 0.4rem;
            }