/* ==========================================================================
   Shared Decorative Edge
   Hero → content transition
   ========================================================================== */

.frontend-decorative-edge {
    --frontend-decorative-edge-height: 72px;

    position: absolute;
    inset-inline: 0;
    top: calc(-1 * var(--frontend-decorative-edge-height));

    width: 100%;
    height: var(--frontend-decorative-edge-height);

    color: var(
        --frontend-decorative-edge-color,
        var(--frontend-design-color-background)
    );

    pointer-events: none;
    line-height: 0;
    z-index: 1;
}

.frontend-decorative-edge__svg {
    display: block;
    width: 100%;
    height: 100%;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .frontend-decorative-edge {
        --frontend-decorative-edge-height: 60px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .frontend-decorative-edge {
        --frontend-decorative-edge-height: 52px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .frontend-decorative-edge {
        --frontend-decorative-edge-height: 44px;
    }
}

@media (max-width: 575px) {
    .frontend-decorative-edge {
        --frontend-decorative-edge-height: 36px;
    }
}