.banner-showcase{position:relative;width:100vw;margin-left:calc(50% - 50vw);aspect-ratio:3/1;max-height:650px;min-height:240px;background:#f2f0e9;overflow:hidden}
.banner-showcase[hidden]{display:none}
.banner-slide{position:absolute;inset:0;animation:banner-fade .45s ease}
.banner-slide[hidden]{display:none}
.banner-slide>a,.banner-slide>picture,.banner-slide>a>picture{display:block;width:100%;height:100%}
.banner-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.banner-control{position:absolute;z-index:1;top:50%;transform:translateY(-50%);width:42px;height:42px;border:1px solid #ffffffa8;border-radius:50%;background:#ffffffe8;color:#303578;display:grid;place-items:center;font-size:27px;line-height:1;box-shadow:0 2px 16px #0002;padding:0}
.banner-control:hover{background:white}
.banner-prev{left:24px}.banner-next{right:24px}
.banner-dots{position:absolute;z-index:1;left:50%;transform:translateX(-50%);bottom:14px;display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:20px;background:#ffffffa6}
.banner-dot{height:9px;width:9px;border:0;border-radius:50%;padding:0;background:#7778a080;transition:width .2s,background .2s}
.banner-dot[aria-current=true]{width:28px;border-radius:9px;background:#303578}
@keyframes banner-fade{from{opacity:.55}to{opacity:1}}
@media(max-width:700px){.banner-showcase{aspect-ratio:1.1;min-height:230px;max-height:720px}.banner-slide picture.desktop-only img{object-fit:contain}.banner-control{width:34px;height:34px;font-size:23px}.banner-prev{left:10px}.banner-next{right:10px}.banner-dots{bottom:9px}}
@media(prefers-reduced-motion:reduce){.banner-slide{animation:none}.banner-dot{transition:none}}