/* Shared by the public banner and its editor preview. The parent clips the crop. */
.gallery-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--banner-position-x, 50%) var(--banner-position-y, 50%);
    transform: scale(var(--banner-zoom, 1));
    transform-origin: var(--banner-position-x, 50%) var(--banner-position-y, 50%);
}

.gallery-banner-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(4 20 30 / .65), rgb(4 20 30 / .1)),
        linear-gradient(0deg, rgb(3 18 26 / .7), transparent 90%);
    opacity: clamp(0, calc(var(--banner-darkness, .5) * 2), 1);
}

/* The midpoint keeps the original shading; the upper half gradually reaches black. */
.gallery-banner-shade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: black;
    opacity: clamp(0, calc((var(--banner-darkness, .5) - .5) * 2), 1);
}