/* @group Example
------------------------------------ */

.content-aside {}

@media only screen and (min-width : 961px) {
    .content-aside .aside-img {
        height: 64rem;
    }

    .content-aside .image-foot{
        padding-inline: 1rem;
    }

}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .content-aside .aside-img {
        height: 50rem;
    }

    .content-aside :is(.col-content, .image-foot) {
        padding-inline: calc((var(--gap-mobile) * 0.5) + (var(--row-mobile-padding) - var(--gap-mobile))) !important;
    }
}

/* @end */


/* 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;
}