@keyframes anim-fade {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

@keyframes anim-dflt {
    0% {
        opacity: 0;
        transform: translate3d(0, 5rem, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes anim-title {
    0% {
        opacity: 0;
        transform: translate3d(0, 5rem, 0) skew(0, 8deg);
        transform-origin: left;
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) skew(0, 0);
    }
}

.anim {
    --delay: 0s;
    --duration: 1s;

    opacity: 0;

    animation-duration: var(--duration);
    animation-delay: var(--delay);
    animation-fill-mode: forwards;
}

.anim.animated {
    animation-name: anim-dflt;
}

.anim-title.animated {
    animation-name: anim-title;
}

.anim-fade.animated {
    animation-name: anim-fade;
}

@media screen and (max-width: 767px) {
    .anim {
        --delay: 0s !important;
    }
}