.has-ripple-top,
.has-ripple-bottom {
    position: relative;
    overflow: hidden;
}

.section-ripple {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 2;
    height: clamp(5rem, 8vw, 8.125rem);
    pointer-events: none;
}

.section-ripple--bottom {
    bottom: -1px;
}

.section-ripple--top {
    top: -1px;
    transform: rotate(180deg);
}

.section-ripple svg {
    display: block;
    width: 100%;
    height: 100%;
}

.section-ripple .ripple-back {
    fill: rgba(239, 185, 76, 0.28);
}

.section-ripple .ripple-front {
    fill: var(--cream);
}

.page-hero.has-ripple-bottom {
    padding-bottom: clamp(7.5rem, 10vw, 10rem);
}

.statement.has-ripple-top.has-ripple-bottom {
    padding-top: clamp(10rem, 12vw, 12rem);
    padding-bottom: clamp(10rem, 12vw, 12rem);
}

.site-footer.has-ripple-top > .container {
    padding-top: clamp(7rem, 9vw, 9rem) !important;
}