.page-banner {
    --catalog-rose: #be8474;
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: #f7f3f0;
    container-type: inline-size;
}

.page-banner:not([data-device]) {
    height: auto;
    aspect-ratio: 1920 / 300;
    --banner-ref: 1920;
    --banner-object-position: right center;
    --banner-x: var(--banner-x-desktop);
    --banner-y: var(--banner-y-desktop);
    --banner-w: var(--banner-w-desktop);
    --banner-title-size: var(--banner-title-size-desktop);
    --banner-desc-size: var(--banner-desc-size-desktop);
}

.page-banner[data-device="desktop"] {
    height: auto;
    aspect-ratio: 1920 / 300;
    --banner-ref: 1920;
    --banner-object-position: right center;
    --banner-x: var(--banner-x-desktop);
    --banner-y: var(--banner-y-desktop);
    --banner-w: var(--banner-w-desktop);
    --banner-title-size: var(--banner-title-size-desktop);
    --banner-desc-size: var(--banner-desc-size-desktop);
}

.page-banner[data-device="tablet"] {
    height: auto;
    aspect-ratio: 1024 / 500;
    --banner-ref: 1024;
    --banner-object-position: right center;
    --banner-x: var(--banner-x-tablet);
    --banner-y: var(--banner-y-tablet);
    --banner-w: var(--banner-w-tablet);
    --banner-title-size: var(--banner-title-size-tablet);
    --banner-desc-size: var(--banner-desc-size-tablet);
}

.page-banner[data-device="mobile"] {
    height: auto;
    aspect-ratio: 480 / 620;
    --banner-ref: 480;
    --banner-object-position: center center;
    --banner-x: var(--banner-x-mobile);
    --banner-y: var(--banner-y-mobile);
    --banner-w: var(--banner-w-mobile);
    --banner-title-size: var(--banner-title-size-mobile);
    --banner-desc-size: var(--banner-desc-size-mobile);
}

.page-banner__media,
.page-banner__media picture,
.page-banner__media img,
.page-banner__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.page-banner__media img {
    display: block;
    object-fit: cover;
    object-position: var(--banner-object-position, right center);
}

.page-banner__overlay {
    display: none;
    background: var(--banner-overlay-color, #000);
    opacity: var(--banner-overlay-opacity, 0);
}

.page-banner.is-overlay .page-banner__overlay { display: block; }

.page-banner__content {
    position: absolute;
    z-index: 2;
    left: var(--banner-x, 8%);
    top: var(--banner-y, 12%);
    width: var(--banner-w, 40%);
    max-width: none;
    margin: 0;
    padding: 0;
    transform: none;
    text-align: var(--banner-align, left);
}

.page-banner__title {
    margin: 0;
    color: var(--banner-title-color, #262321);
    font-family: var(--banner-title-font, Georgia, "Times New Roman", serif);
    font-size: calc(var(--banner-title-size, 64) * 1px);
    font-size: calc(var(--banner-title-size, 64) / var(--banner-ref, 1920) * 100cqw);
    font-weight: var(--banner-title-weight, 500);
    line-height: var(--banner-title-leading, 1.02);
}

.page-banner__title span { display: block; }
.page-banner__title span.is-accent,
.page-banner__title span + span { color: var(--catalog-rose); }

.page-banner__description {
    width: 100%;
    max-width: none;
    margin: 0.65em 0 0;
    color: var(--banner-description-color, #333);
    font-family: var(--banner-description-font, Inter, sans-serif);
    font-size: calc(var(--banner-desc-size, 22) * 1px);
    font-size: calc(var(--banner-desc-size, 22) / var(--banner-ref, 1920) * 100cqw);
    font-weight: var(--banner-description-weight, 400);
    line-height: var(--banner-description-leading, 1.45);
}

@media (max-width: 1024px) {
    .page-banner:not([data-device]) {
        aspect-ratio: 1024 / 500;
        --banner-ref: 1024;
        --banner-object-position: right center;
        --banner-x: var(--banner-x-tablet);
        --banner-y: var(--banner-y-tablet);
        --banner-w: var(--banner-w-tablet);
        --banner-title-size: var(--banner-title-size-tablet);
        --banner-desc-size: var(--banner-desc-size-tablet);
    }
}

@media (max-width: 768px) {
    .page-banner:not([data-device]) {
        aspect-ratio: 480 / 620;
        --banner-ref: 480;
        --banner-object-position: center center;
        --banner-x: var(--banner-x-mobile);
        --banner-y: var(--banner-y-mobile);
        --banner-w: var(--banner-w-mobile);
        --banner-title-size: var(--banner-title-size-mobile);
        --banner-desc-size: var(--banner-desc-size-mobile);
    }
}