.rp-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #faf7f2;
}

.rp-hero__image {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    background-image: url('../images/hero-interior.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transform-origin: center center;
    animation: rpHeroImageFinal 12s linear both;
}

@keyframes rpHeroImageFinal {
    0% {
        opacity: .85;
        transform: scale(1.22);
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.rp-hero__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(250,247,242,.99) 0%,
            rgba(250,247,242,.95) 19%,
            rgba(250,247,242,.82) 31%,
            rgba(250,247,242,.40) 46%,
            rgba(250,247,242,.04) 67%,
            transparent 78%
        ),
        linear-gradient(
            0deg,
            rgba(250,247,242,.82) 0%,
            rgba(250,247,242,.08) 22%,
            transparent 45%
        );
}

@media (max-width: 767px) {
    .rp-hero__image {
        background-size: cover;
        background-position: 60% center;
    }

    .rp-hero__overlay {
        background: linear-gradient(
            180deg,
            rgba(250,247,242,.48) 0%,
            rgba(250,247,242,.94) 260px,
            #faf7f2 440px
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .rp-hero__image {
        animation: none;
        transform: none;
    }
}


@media (min-width: 768px) {
    .rp-hero__inner {
        justify-content: flex-start;
        gap: 48px;
    }

    .rp-hero__features {
        margin-top: 0;
        padding-top: 20px;
    }
}