/* @group Title With Blocks
------------------------------------ */

.title-with-blocks .title-row {
    position: relative;
    height: 20.2rem;
}
.title-with-blocks .title-row .title-col {
    position: static;
}
.title-with-blocks .title-row .title-col .bp-multimedia {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    overflow: hidden;
}
:where(#wrapper) .title-with-blocks .title-row .title-col .bp-multimedia {
    pointer-events: none;
}
.title-with-blocks .title-row .title-col :is(.text-group, #important) {
    position: relative;
    z-index: var(--z-index-lowest);
    max-width: 69rem;
    margin: 0 auto;
}

.title-with-blocks .block-col .bp-multimedia {
    height: 23.6rem;
}

@media only screen
and (min-width : 961px) {
    .title-with-blocks .title-row {
        height: 27rem;
    }
    .title-with-blocks .block-col .bp-multimedia {
        height: 40rem;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .title-with-blocks :is(.title-row, #important) {
        flex-direction: row;
    }
    .title-with-blocks .block-col:not(:last-of-type) {
        margin-bottom: 5rem;
    }
    .title-with-blocks .block-col .has-heading-5-font-size {
        --fs: 1.8rem;
    }
    .title-with-blocks .title-row .title-col .bp-multimedia {
        width: calc(100% - 6rem);
    }
}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .title-with-blocks .bp-multimedia img {
	opacity: 0;
	--duration: 1.5s;
    --delay: 0.5s;
}
:where(#wrapper) .title-with-blocks.animateActive .bp-multimedia img {
	animation: netflix var(--duration) forwards;
	animation-delay: var(--delay, 0);
}