#hero{overflow:hidden;position:relative}.hero-background-carousel{display:flex;transition:transform .5s ease}.hero-background-carousel,.hero-background-image{height:100%;left:0;position:absolute;top:0;width:100%}.hero-background-image{object-fit:cover;opacity:0;transition:opacity 1s ease}.hero-background-image.active{animation:fadeIn 1s ease forwards;opacity:1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.hero-carousel-arrow{align-items:center;background:none;border:none;color:#fff;cursor:pointer;display:flex;font-size:24px;height:40px;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:40px;z-index:10}.hero-carousel-arrow.left{left:10px}.hero-carousel-arrow.right{right:10px}.hero-carousel-arrow:hover{color:hsla(0,0%,100%,.8)}.hero-carousel-indicators{bottom:20px;display:flex;gap:10px;left:50%;position:absolute;transform:translateX(-50%);z-index:100}.hero-carousel-indicator{background-color:hsla(0,0%,100%,.5);border-radius:50%;cursor:pointer;height:12px;transition:background-color .3s;width:12px}.hero-carousel-indicator.active{background-color:#fff}