:root {
    --content-header-image-height: 420px;
    --content-header-image-height-mobile: 320px;
}

.page-header {
    display: flex;
    min-height: var(--content-header-image-height);
    align-items: center;
    justify-content: center;
}

.content-header--image,
.has-content-header-image .page-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--primary);
    background-image: linear-gradient(105deg, #241d6f, #572ba3);
    text-shadow: 0 2px 14px rgba(15, 23, 42, .34);
}

.content-header--image::before,
.has-content-header-image .page-header::before {
    position: absolute;
    z-index: 0;
    inset: -20px;
    background-image: var(--content-header-image);
    background-position: var(--content-header-position, center);
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    filter: blur(18px);
    opacity: .38;
    transform: scale(1.045);
    transition: filter .55s ease, opacity .35s ease, transform .55s ease;
}

.content-header--image::after,
.has-content-header-image .page-header::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(105deg, rgba(36, 29, 111, .74), rgba(87, 43, 163, .58));
    content: '';
    pointer-events: none;
}

.content-header--image > *,
.has-content-header-image .page-header > * {
    position: relative;
    z-index: 2;
}

.content-header-image-loaded .content-header--image::before,
.content-header-image-loaded.has-content-header-image .page-header::before {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
}

.content-header--grammar {
    --content-header-position: center 68%;
}

.content-header--turkish-minute {
    --content-header-position: center 60%;
}

.content-header--word-archive {
    --content-header-position: center 72%;
}

@media (prefers-reduced-motion: reduce) {
    .content-header--image::before,
    .has-content-header-image .page-header::before {
        transition: none;
    }
}

@media (max-width: 576px) {
    .page-header {
        min-height: var(--content-header-image-height-mobile);
    }
}