.frontwar-banner{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:20/9;background:#131b18;--card-w:180px;--card-h:270px;--card-gap:28px;--card-right:7vw;direction:ltr}
.banner-card{position:absolute;inset:auto;top:calc(100% - var(--card-h) - 130px);left:calc(100% - var(--card-right) - var(--card-w));width:var(--card-w);height:var(--card-h);border:1px solid #ffffff40;border-radius:10px;overflow:hidden;padding:0;z-index:3;box-shadow:8px 12px 40px #0008;transition:top .8s cubic-bezier(.22,.7,.2,1),left .8s cubic-bezier(.22,.7,.2,1),width .8s cubic-bezier(.22,.7,.2,1),height .8s cubic-bezier(.22,.7,.2,1),border-radius .8s;cursor:pointer;color:#fff;background:#1d3229}
.banner-card[data-position="1"]{left:calc(100% - var(--card-right) - var(--card-w)*2 - var(--card-gap))}
.banner-card[data-position="3"]{left:calc(100% + var(--card-gap));pointer-events:none}
.banner-card[data-position="0"]{top:0;left:0;width:100%;height:100%;border:0;border-radius:0;z-index:1;box-shadow:none;cursor:default}
.banner-card::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#101811ef,#18271c44),url('/website/terrain.svg') center/cover;transition:transform 7s linear;transform:scale(1.03)}
.banner-card[data-banner="1"]{background:#443222}.banner-card[data-banner="1"]::before{background:linear-gradient(100deg,#21180fee,#72512e44),url('/website/terrain.svg') 60% center/cover}
.banner-card[data-banner="2"]{background:#243746}.banner-card[data-banner="2"]::before{background:linear-gradient(100deg,#0f1922ee,#24527644),url('/website/terrain.svg') 80% center/cover}
.banner-card[data-position="0"]::before{transform:scale(1.1)}
.banner-card::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#060e12bb,transparent 50%)}
.banner-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center}
.banner-card--art::before{display:none}
.banner-card--art[data-position="0"]::after,.banner-card--art .banner-placeholder{display:none}
.banner-card--art[data-position="0"] .banner-image{object-fit:contain;object-position:center top}
.banner-placeholder{position:absolute;left:16px;bottom:24px;z-index:2;display:grid;gap:14px;text-align:left}
.banner-placeholder strong{font-family:FrontwarDisplay,'Arial Narrow',sans-serif;font-size:30px;line-height:1.05;text-transform:uppercase;font-weight:800;white-space:nowrap}
.banner-placeholder small{font-size:9px;letter-spacing:2px;color:#c5c9bb}
.banner-card[data-position="0"] .banner-placeholder{left:7vw;bottom:36%;gap:22px}
.banner-card[data-position="0"] .banner-placeholder strong{font-size:clamp(70px,8vw,130px)}
.banner-card[data-position="0"] .banner-placeholder small{font-size:12px;letter-spacing:5px}
.banner-controls{position:absolute;right:var(--card-right);bottom:3%;width:calc(var(--card-w)*2 + var(--card-gap));display:flex;gap:14px;align-items:center;z-index:5}
.banner-controls button{width:45px;height:45px;flex:0 0 45px;display:grid;place-items:center;border:1px solid #ffffff66;background:#15201877;border-radius:50%;font-size:21px;transition:background .2s}
.banner-controls button:hover{background:#ffffff20}.banner-progress{height:3px;background:#ffffff30;flex:1;overflow:hidden}.banner-progress i{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(0)}.banner-counter{font-size:26px;font-weight:700;min-width:38px}
.banner-pause{position:absolute;right:28px;top:26px;z-index:5;border:1px solid #ffffff40;background:#111a17aa;border-radius:50%;width:40px;height:40px;font-size:21px}
.banner-pause[aria-pressed=true]{border-color:var(--orange)}
@media(max-width:1000px){.frontwar-banner{--card-w:140px;--card-h:180px;--card-gap:20px;aspect-ratio:auto;height:calc(45vw + 70px)}.banner-card[data-position="0"] .banner-placeholder{bottom:45%}.banner-controls{bottom:12px}.banner-card--art[data-position="0"] .banner-image{height:45vw}}
@media(max-width:650px){.frontwar-banner{height:calc(90vw + 244px);--card-w:100px;--card-h:140px;--card-gap:16px;--card-right:24px}.banner-card{top:calc(100% - var(--card-h) - 80px)}.banner-card[data-position="0"] .banner-placeholder{left:24px;top:110px;bottom:auto}.banner-card[data-position="0"] .banner-placeholder strong{font-size:65px}.banner-placeholder strong{font-size:21px}.banner-placeholder{left:10px;bottom:15px;gap:9px}.banner-placeholder small{font-size:7px;letter-spacing:1px}.banner-card--art[data-position="0"] .banner-image{height:90vw;object-fit:cover;object-position:left top}.banner-controls{bottom:20px;gap:10px;width:calc(100% - 48px)}.banner-card[data-position="0"] .banner-placeholder small{font-size:10px;letter-spacing:3px}}
@media(prefers-reduced-motion:reduce){.banner-card,.banner-card::before{transition:none!important}}

@media(max-width:650px){.banner-card:not([data-position="0"]) .banner-placeholder strong{font-size:17px}}