.paragraph--type--hero .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100%;
    padding-top: .3125rem;
}

.paragraph--type--hero .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--hero-bg-image, none);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .3;
    pointer-events: none;
}

.paragraph--type--hero .hero-contenido {
    width: 100%;
    animation: hero-fade-in 3s ease;
}

@keyframes hero-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (min-width: 992px) {
    .paragraph--type--hero .hero-contenido {
        padding-right: 10rem;
        padding-left: 10rem;
    }
}