.hero{display:block;min-height:0;background:#030e1c}
.hero-media{width:100%;height:auto;aspect-ratio:2000/960;clip-path:none;position:relative;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:contain;background:#030e1c;transition:opacity .28s ease,transform .45s ease}
.hero-media img.changing{opacity:.35}
.hero-arrow{position:absolute;top:50%;z-index:2;width:52px;height:52px;border:1px solid rgba(255,255,255,.6);border-radius:50%;background:rgba(3,14,28,.5);color:#fff;font:300 38px/1 Arial;cursor:pointer;transform:translateY(-50%);backdrop-filter:blur(5px);transition:background .2s,transform .2s}
.hero-arrow:hover{background:var(--blue);transform:translateY(-50%) scale(1.05)}
.hero-prev{left:max(20px,calc((100vw - var(--max))/2))}
.hero-next{right:max(20px,calc((100vw - var(--max))/2))}
.hero-dots{position:absolute;left:50%;bottom:22px;z-index:2;display:flex;gap:9px;transform:translateX(-50%)}
.hero-dots button{width:28px;height:4px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.48);cursor:pointer;transition:width .2s,background .2s}
.hero-dots button.active{width:48px;background:#fff}
@media(max-width:900px){.hero-media{height:auto;aspect-ratio:2000/960}.hero-arrow{width:42px;height:42px;font-size:30px}.hero-prev{left:16px}.hero-next{right:16px}}
@media(max-width:560px){.hero-media{height:auto;aspect-ratio:2000/960}.hero-arrow{width:36px;height:36px;font-size:26px}.hero-dots{bottom:14px}.hero-dots button{width:20px}.hero-dots button.active{width:34px}}
.blog-all-link{display:flex;justify-content:center;margin-top:42px}