/* @group Content Layout
------------------------------------ */

.content-layout .text-box {
    padding: 1.5rem;
    border: 1px solid var(--_group-border);
    border-bottom-width: 1.4rem;
}
.content-layout .images-box .bp-group .bp-multimedia:not(.decoration) {
    height: 23.9rem;
}
.content-layout :is(.images-box, #important) .bp-group .decoration {
    position: absolute;
    pointer-events: none;
    z-index: var(--z-index-lowest);
}
.content-layout :is(.images-box, #important) .bp-group .decoration :is(img, #important) {
    object-fit: contain;
}
.content-layout :is(.images-box.first, #important) .bp-group:is(.left) .decoration:is(.top) {
    width: 3.6rem;
    height: 3.6rem;
    top: .5rem;
    right: -1rem;
}
.content-layout :is(.images-box.first, #important) .bp-group:is(.left) .decoration:is(.bottom) {
    width: 2.3rem;
    height: 2.3rem;
    left: -1.2rem;
    bottom: 1.8rem;
}
.content-layout :is(.images-box.first, #important) .bp-group:is(.right) .decoration:is(.top) {
    width: 1.6rem;
    height: 1.6rem;
    left: -.7rem;
    top: -1rem;
}
.content-layout :is(.images-box.first, #important) .bp-group:is(.right) .decoration:is(.bottom) {
    width: 2.3rem;
    height: 2.3rem;
    right: 0;
    bottom: -1.6rem;
}
.content-layout :is(.images-box.last, #important) .bp-group:is(.left) .decoration:is(.top) {
    width: 4rem;
    height: 4rem;
    right: -1.1rem;
    top: 2.3rem;
}
.content-layout :is(.images-box.last, #important) .bp-group:is(.left) .decoration:is(.bottom) {
    width: 2.2rem;
    height: 2.2rem;
    left: -1rem;
    bottom: .9rem;
}
.content-layout :is(.images-box.last, #important) .bp-group:is(.right) .decoration {
    width: 3.7rem;
    height: 3.7rem;
    right: 1rem;
    bottom: -1.6rem;
}

@media only screen
and (min-width : 961px) {
    .content-layout .row {
        padding-block: 11.8rem 11rem;
        position: relative;
    }
    .content-layout :is(.text-box, #important) {
        flex: 0 1 33%;
    }
    .content-layout :is(.text-box.first, #important) {
        margin-left: 25%;
        margin-bottom: 6rem;
    }
    .content-layout :is(.text-box.last, #important) {
        margin-left: 42%;
    }
    .content-layout :is(.images-box, #important) {
        position: static;
    }
    .content-layout :is(.images-box, #important) .bp-group {
        position: absolute;
    }
    .content-layout :is(.images-box.first, #important) .bp-group:is(.left) {
        top: 5.8rem;
        left: 0;
    }
    .content-layout :is(.images-box.first, #important) .bp-group:is(.right) {
        top: 0;
        left: 66%;
    }
    .content-layout :is(.images-box.last, #important) .bp-group:is(.left) {
        bottom: 0;
        left: 16%;
    }
    .content-layout :is(.images-box.last, #important) .bp-group:is(.right) {
        bottom: 9rem;
        right: 0;
    }
    .content-layout :is(.images-box, #important) .bp-multimedia:not(.decoration) {
        width: 17rem;
    }
    .content-layout :is(.images-box.first, #important) .bp-group:is(.right) .decoration:is(.top) {
        left: -2rem;
        top: .6rem;
    }
    .content-layout :is(.images-box.first, #important) .bp-group:is(.right) .decoration:is(.bottom) {
        width: 4rem;
        height: 4rem;
        right: -3.3rem;
        bottom: -2.2rem;
    }
    .content-layout :is(.images-box.last, #important) .bp-group:is(.right) .decoration {
        right: unset;
        bottom: unset;
        top: .7rem;
        left: -1.2rem;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .content-layout .content-row > .bp-group {
        margin-inline: auto;
        width: calc(100% - 1.25rem);
    }
    .content-layout .content-row > .bp-group:not(:last-of-type) {
        margin-bottom: 4.5rem;
    }
    .content-layout .text-box :is(.bp-button, #important) {
        width: 100%;
    }
    .content-layout :is(.images-box, #important) {
        gap: 2.3rem;
    }
    .content-layout :is(.images-box, #important) .bp-group {
        width: calc(50% - 1.15rem);
        position: relative;
    }
}

/* @end */


:where(.editor-styles-wrapper) .content-layout .content-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
    flex-wrap: wrap;
}
:where(.editor-styles-wrapper) .content-layout :is(.images-box, .text-box, #important) {
    width: 50%;
    margin-bottom: 6rem;
}
:where(.editor-styles-wrapper) .content-layout :is(.text-box, #important) {
    margin-left: 0!important;
}
:where(.editor-styles-wrapper) .content-layout :is(.images-box, #important) :is(.block-editor-inner-blocks .block-editor-block-list__layout, #important) {
    position: static;
    gap: 3rem!important;
}
:where(.editor-styles-wrapper) .content-layout :is(.images-box, #important) :is(.bp-group, #important) {
    position: relative;
    inset: unset!important;
}
:where(.editor-styles-wrapper) .content-layout :is(.images-box, #important) :is(.bp-multimedia, #important) {
    pointer-events: all;
}
:where(.editor-styles-wrapper) .content-layout :is(.images-box, #important) .bp-multimedia:not(.decoration) {
    width: 25rem;
    height: 35rem;
}



/* Animations
------------------------------------ */
:where(#wrapper) .contenedor .elemento {
	opacity: 0;
	--duration: 1s;
}
:where(#wrapper) .contenedor.animateActive .elemento {
	animation: fade var(--duration) forwards;
	animation-delay: var(--delay, 0);
}
:where(#wrapper) .contenedor.animateActive .elemento {
    --delay: 0.3s;
}