/* @group Residents Banner
------------------------------------ */

.residents-banner .text-col .decoration {
    position: absolute;
}
.residents-banner .text-col .decoration :is(img, #important) {
    object-fit: contain;
    object-position: center center;
}

@media only screen
and (min-width : 961px) {
    .residents-banner :is(.text-col, #important) {
        padding-inline: calc(15% + 2.5rem);
        padding-block: 7rem 5rem;
    }
    .residents-banner .text-col .decoration {
        top: 50%;
        transform: translate(0, -50%);
        width: 13.1rem;
        height: 24.3rem;
    }
    .residents-banner .text-col .decoration:is(.left) {
        left: 0;
    }
    .residents-banner .text-col .decoration:is(.right) {
        right: 0;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .residents-banner .text-col {
        padding-block: 12.2rem;
    }
    .residents-banner .text-col .decoration {
        left: 50%;
        transform: translate(-50%, 0);
        width: 14.3rem;
        height: 7.7rem;
    }
    .residents-banner .text-col .decoration:is(.top) {
        top: 0;
    }
    .residents-banner .text-col .decoration:is(.bottom) {
        bottom: 0;
    }
    .residents-banner .text-col .has-heading-3-font-size {
        --fs: 4rem;
        --lh: 1em;
        --ls: .005em;
    }
}

/* @end */


/* Editor
------------------------------------ */
:where(.editor-styles-wrapper) .residents-banner .text-col .decoration:is(.left) {
    left: -15rem;
}
:where(.editor-styles-wrapper) .residents-banner .text-col .decoration:is(.right) {
    right: -15rem;
}


/* Animations
------------------------------------ */
:where(#wrapper) .residents-banner .text-col .decoration {
    opacity: 0;
    --duration: .5s;
}
:where(#wrapper) .residents-banner.animateActive .text-col .decoration {
    animation: fade var(--duration) forwards;
    animation-delay: .3s;
}