/*
 * Viewer V3.1 gebruikt exact dezelfde afbeelding en uitsnede als list.php.
 */
.viewer-category-header {
    overflow: hidden !important;
    isolation: isolate !important;
    background-color: #315f88 !important;
}

.viewer-category-header::before {
    content: "" !important;
    position: absolute !important;
    inset: -24% -26% -14% -6% !important;
    z-index: -2 !important;
    background-image: var(--viewer-header-image) !important;
    background-repeat: no-repeat !important;
    background-position: 34% 63% !important;
    background-size: 128% auto !important;
    filter: brightness(1.24) saturate(1.08) contrast(.96) !important;
    transform: none !important;
    opacity: 1 !important;
}

.viewer-category-header::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background:
        linear-gradient(
            90deg,
            rgba(6, 38, 70, .35) 0%,
            rgba(14, 67, 108, .20) 52%,
            rgba(25, 83, 124, .12) 100%
        ) !important;
    pointer-events: none;
}

.viewer-category-header__overlay {
    display: none !important;
}

@media (max-width: 900px) {
    .viewer-category-header::before {
        inset: -18% -40% -10% -8% !important;
        background-position: 31% 61% !important;
        background-size: 145% auto !important;
    }
}

@media (max-width: 560px) {
    .viewer-category-header::before {
        inset: -12% -62% -8% -10% !important;
        background-position: 28% 59% !important;
        background-size: 174% auto !important;
    }
}