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

.title-center strong {
    color: var(--red);
    font-weight: 500;
}

.title-center h1 {
    text-align: center;
}

@media only screen and (min-width : 961px) {}

@media only screen and (min-width : 961px) and (max-width : 1440px) {}

@media only screen and (min-width : 0) and (max-width : 960px) {
    
    .title-center mark {
        margin-bottom: -2rem;
        display: block;
    }
}

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