[blocname="conteneur-hero"] {
    display: grid;
    overflow: hidden;
}

[blocname="conteneur-hero"] > [blocname^="hero-item-"] {
    grid-area: 1 / 1;
    will-change: opacity;
}

[blocname="conteneur-hero"] > [blocname^="hero-item-"].hero-inactif {
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

[blocname="conteneur-hero"] > [blocname^="hero-item-"].hero-entrant {
    opacity: 1;
    z-index: 2;
    pointer-events: none;
}

[blocname="conteneur-hero"] > [blocname^="hero-item-"].hero-actif {
    opacity: 1;
    z-index: 3;
}

[blocname="conteneur-hero"] > [blocname^="hero-item-"].hero-sortant {
    opacity: 0;
    z-index: 3;
    transition: opacity 1s ease-in-out 0.5s;
}

[blocname="conteneur-hero"] > [blocname^="hero-item-"] > * {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease-out;
}

[blocname="conteneur-hero"] > [blocname^="hero-item-"].hero-inactif > *,
[blocname="conteneur-hero"] > [blocname^="hero-item-"].hero-entrant > * {
    opacity: 0;
    transform: translateY(40px);
    transition: none;
}

[blocname="conteneur-hero"] > [blocname^="hero-item-"].hero-sortant > * {
    opacity: 0;
    transform: translateY(40px);
}

[blocname="conteneur-hero"] > [blocname^="hero-item-"].hero-actif > * {
    opacity: 1;
    transform: translateY(0);
}