/* @group Image & List
------------------------------------ */

/* Image Col
------------- */
.image-and-list-reversed .image-col .bp-multimedia {
    height: 37.4rem;
}

/* List Col
------------- */
.image-and-list-reversed .list-col .wp-block-list li {
    padding-block: .3rem .5rem;
    border-bottom: 1px solid var(--gold);
}
.image-and-list-reversed .list-col .wp-block-list li:is(:nth-child(1)) {
    margin-top: .5rem;
    border-top: 1px solid var(--gold);
}

@media only screen
and (min-width : 961px) {
    /* Image Col
    ------------- */
    .image-and-list-reversed .image-col .bp-multimedia {
        width: calc(100% - 2.2rem);
        height: 100%;
        margin-left: auto;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .image-and-list-reversed {
        position: relative;
        padding-top: 39.9rem;
    }
    /* Image Col
    ------------- */
    .image-and-list-reversed .image-col {
        position: static;
    }
    .image-and-list-reversed .image-col .bp-multimedia {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
}

/* @end */


/* Animations
------------------------------------ */
@media only screen
and (min-width : 961px) {
    :where(#wrapper) .image-and-list-reversed :is(.title-col, .image-col, .list-col) {
        opacity: 0;
        --duration: 1s;
    }
    :where(#wrapper) .image-and-list-reversed.animateActive :is(.title-col, .image-col, .list-col) {
        animation: fade var(--duration) forwards;
        animation-delay: var(--delay, 0);
    }
    :where(#wrapper) .image-and-list-reversed.animateActive :is(.title-col) {
        --delay: 0.3s;
    }
    :where(#wrapper) .image-and-list-reversed.animateActive :is(.list-col) {
        --delay: 0.5s;
    }
    :where(#wrapper) .image-and-list-reversed.animateActive :is(.image-col) {
        --delay: 0.7s;
    }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    :where(#wrapper) .image-and-list-reversed :is(.title-col, .image-col, .list-col) {
        opacity: 0;
        --duration: 1s;
    }
    :where(#wrapper) .image-and-list-reversed.animateActive :is(.title-col, .image-col, .list-col) {
        animation: fade var(--duration) forwards;
        animation-delay: var(--delay, 0);
    }
    :where(#wrapper) .image-and-list-reversed.animateActive :is(.image-col) {
        --delay: 0.3s;
    }
    :where(#wrapper) .image-and-list-reversed.animateActive :is(.title-col, .list-col) {
        --delay: 0.5s;
    }
}