/* Banner Module Styles */

.banner {
    --banner-blend-height: 30px;
    --banner-blend-mid-opacity: 0.35;
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.banner::before,
.banner::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

.banner::before {
    top: 0;
    height: 32px;
    background: linear-gradient(to bottom, var(--page-red-top), transparent);
}

.banner::after {
    bottom: 0;
    height: var(--banner-blend-height);
    background: linear-gradient(
        to bottom,
        rgba(217, 2, 1, 0) 0%,
        rgba(217, 2, 1, var(--banner-blend-mid-opacity)) 45%,
        var(--page-red-seam) 100%
    );
}

.banner-image {
    width: 100%;
    height: auto;
    display: block;
}