.homepage-banner-frame { position:relative; }
.homepage-banner-viewport { position:relative; overflow:hidden; aspect-ratio:16 / 5; background:#f8fafc; }
.homepage-banner-slide { position:absolute; inset:0; }
.homepage-banner-slide[hidden] { display:none; }
.homepage-banner-slide a { display:block; width:100%; height:100%; }
.homepage-banner-slide img { display:block; width:100%; height:100%; object-fit:cover; }
.homepage-banner-arrow { position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:rgb(15 23 42 / 35%); color:white; cursor:pointer; font-size:20px; z-index:2; }
.homepage-banner-prev { left:12px; }
.homepage-banner-next { right:12px; }
.homepage-banner-arrow:hover { background:rgb(15 23 42 / 55%); }
.homepage-banner-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; justify-content:center; flex-wrap:wrap; max-width:75%; padding:2px 6px; border-radius:20px; background:rgb(15 23 42 / 25%); z-index:2; }
.homepage-banner-dot { display:grid; place-items:center; width:24px; height:24px; padding:0; border:0; background:transparent; cursor:pointer; }
.homepage-banner-dot::after { content:''; width:8px; height:8px; border:1px solid white; border-radius:50%; background:rgb(255 255 255 / 35%); }
.homepage-banner-dot[aria-current="true"]::after { background:white; transform:scale(1.25); }
.homepage-banner-arrow:focus-visible, .homepage-banner-dot:focus-visible { outline:2px solid white; outline-offset:2px; box-shadow:0 0 0 4px #0f172a; }
.homepage-banner-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:640px) { .homepage-banner-arrow { width:32px; height:32px; font-size:16px; } .homepage-banner-prev { left:6px; } .homepage-banner-next { right:6px; } .homepage-banner-dots { bottom:4px; } }