_call-to-action.scss

.call-to-action {
    .column {
        &:nth-child(odd),
        &:nth-child(even) {
            img {
                mask-repeat: no-repeat;
                mask-size: contain;
                mask-position: center;
            }
        }

        &:nth-child(odd) {
            img {
                mask-image: url('../images/vector-image-vertical.svg');
            }
        }

        &:nth-child(even) {
            img {
                mask-image: url('../images/vector-image-vertical-reverse.svg');
            }
        }

        @include until($tablet) {
            .image {
                padding-top: 100%;
            }
        }
    }
}

/*
 * Specific styles if CTA is below hero
 */
body.page-template-page-front-page .hero + .call-to-action.before-has-background-white:has(.shape-slot--top.border-shape--wave-top-reverse) {
    margin-top: $theme-spacing-two;
    padding-top: 0 !important;

    .shape-slot--top {
        margin-top: $theme-spacing-two;

        &::before,
        &::after {
            top: 1px;
            height: 16rem;
        }
    }

    &.has-background-blue {
        .call-to-action__layout-title {
            color: $color-muumi-blue;
        }
    }
}

// Hard-stop gradient bleed: paints the hero's background color over the
// first 12rem of the call-to-action, then falls through to the CTA's own
// background-color. Generated per color class since CSS variables cannot
// cross from a sibling element.
$_hero-bleed-colors: (
    "white": $color-white,
    "black": $color-muumi-black,
    "gray": $color-muumi-gray,
    "blue": $color-muumi-blue,
    "bluegray": $color-muumi-bluegray,
    "magenta": $color-muumi-magenta,
    "yellow": $color-muumi-yellow,
    "orange": $color-muumi-orange,
    "pink": $color-muumi-pink,
    "light-pink": $color-muumi-light-pink,
);

@each $name, $color in $_hero-bleed-colors {
    body.page-template-page-front-page .hero.has-background-#{$name} + .call-to-action.before-has-background-white:has(.shape-slot--top.border-shape--wave-top-reverse) {
        background-image: linear-gradient(
            to bottom,
            #{$color} 16rem,
            transparent 16rem
        );
    }
}