.jho-hero{position:relative;width:100%;aspect-ratio:1920/700;overflow:hidden;
padding:0 3%;box-sizing:border-box}
.jho-hero .jho-slide{position:absolute;top:0;bottom:0;left:3%;right:3%;display:block;
background-size:contain;background-position:center;background-repeat:no-repeat;
opacity:0;transition:opacity 1s ease;z-index:1}
.jho-hero .jho-slide.is-active{opacity:1;z-index:2}
.jho-dots{position:absolute;z-index:5;bottom:26px;left:50%;transform:translateX(-50%);
display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:90%}
.jho-dots button{width:11px;height:11px;border-radius:50%;border:none;cursor:pointer;
background:rgba(255,255,255,.5);padding:0;transition:.25s;box-shadow:0 0 4px rgba(0,0,0,.3)}
.jho-dots button.is-active{background:#e7d4a0;width:26px;border-radius:6px}
(function(){
var hero=document.currentScript.previousElementSibling;
hero=hero.previousElementSibling;
var slides=hero.querySelectorAll('.jho-slide');
var dotsBox=hero.querySelector('.jho-dots');
var i=0,timer;
slides.forEach(function(s,idx){
var b=document.createElement('button');
if(idx===0)b.className='is-active';
b.addEventListener('click',function(){go(idx);reset();});
dotsBox.appendChild(b);
});
var dots=dotsBox.querySelectorAll('button');
function go(n){
slides[i].classList.remove('is-active');dots[i].classList.remove('is-active');
i=n;slides[i].classList.add('is-active');dots[i].classList.add('is-active');
}
function next(){go((i+1)%slides.length);}
function start(){timer=setInterval(next,5000);}
function reset(){clearInterval(timer);start();}
hero.addEventListener('mouseenter',function(){clearInterval(timer);});
hero.addEventListener('mouseleave',start);
start();
})();
