.cause-banner-slider { position:relative; width:100%; overflow:hidden; background:var(--forest-deep); }.cause-banner-track { display:flex; transition:transform .65s cubic-bezier(.22,.61,.36,1); }.cause-banner-slide { display:block; flex:0 0 100%; line-height:0; }.cause-banner-slide img { width:100%; aspect-ratio:16 / 7; min-height:360px; object-fit:cover; }.cause-banner-control { position:absolute; z-index:2; bottom:24px; display:grid; width:48px; height:48px; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; color:#fff; background:rgba(9,63,36,.82); font-size:16px; transition:.2s ease; backdrop-filter:blur(8px); }.cause-banner-control:hover { border-color:var(--gold); color:var(--brown); background:var(--gold); }.cause-banner-prev { right:82px; }.cause-banner-next { right:22px; }.cause-banner-dots { position:absolute; z-index:2; bottom:18px; left:50%; display:flex; gap:8px; transform:translateX(-50%); }.cause-banner-dots button { width:31px; height:5px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.45); transition:.2s ease; }.cause-banner-dots button.is-active { width:55px; background:var(--gold); }.cause-banner-dots button:focus-visible { outline-color:#fff; outline-offset:4px; }
@media (max-width:700px) { .cause-banner-slide img { display:block; width:100%; height:auto; min-height:0; aspect-ratio:16 / 7; object-fit:contain; object-position:center; background:var(--forest-deep); }.cause-banner-control { bottom:15px; width:38px; height:38px; }.cause-banner-prev { right:62px; }.cause-banner-next { right:15px; }.cause-banner-dots { bottom:12px; } }
@media (max-width:480px) { .cause-banner-slide img { aspect-ratio:16 / 7; }.cause-banner-control { bottom:10px; width:32px; height:32px; font-size:12px; }.cause-banner-prev { right:53px; }.cause-banner-next { right:10px; }.cause-banner-dots { bottom:8px; gap:5px; }.cause-banner-dots button { width:22px; height:4px; }.cause-banner-dots button.is-active { width:38px; } }