.banner-ads-wrap { width: 100%; max-width: 20rem; position: relative; margin: 4rem auto; padding: 0 3rem; background-color: hsla(var(--siteColor1), 10%); border-radius: var(--borderRadius); box-shadow: var(--dropShadow); }
.banner-ad-swiper-wrap { display: flex; flex-wrap: wrap; justify-content: center; padding: 2rem 0; transition: all 0.4s ease-in-out; }
.banner-ad-img-wrap { overflow: hidden; width: 100%; position: relative; margin-bottom: 2rem; /* padding-bottom: 65%; */ background: hsl(var(--white)); border-radius: var(--borderRadiusCheckbox); }
.banner-ad-img-wrap > img { object-fit: contain; width: auto; max-width: 100%; height: auto; margin: auto; position: relative; /* position: absolute; inset: 0; */ }
.banner-ad-title { font-size: 1.5rem; color: var(--siteColor1); text-align: center; font-weight: var(--wMedium); transition: all 0.4s ease-in-out; }
.banner-ad-swiper-wrap:hover,
.banner-ad-swiper-wrap:hover .banner-ad-title { color: hsl(var(--siteColor2)); text-decoration: none; }

.banner-ads-controls { width: calc(100% + 4rem); margin: auto; position: absolute; top: 50%; right: 0; left: -2rem; z-index: 2; transform: translate(0,-50%); }
.banner-ads-controls .banner-ads-btn-next,
.banner-ads-controls .banner-ads-btn-prev { width: 3.125rem; height: 3.125rem; position: absolute; top: 50%; background-color: hsl(var(--siteColor1)); border: 0.125rem hsl(var(--lightGray)) solid; border-radius: 50vw; box-shadow: none; color: hsl(var(--lightGray)); transition: all 0.4s ease-in-out; }
.banner-ads-controls .banner-ads-btn-next { right: 0.625rem; }
.banner-ads-controls .banner-ads-btn-prev { left: 0.625rem; }
.banner-ads-controls .banner-ads-btn-next:hover,
.banner-ads-controls .banner-ads-btn-prev:hover { background: hsl(var(--siteColor1)); border-color: hsl(var(--siteColor1)); box-shadow: var(--dropShadow); color: hsl(var(--white)); }
.banner-ads-controls .banner-ads-btn-next:focus,
.banner-ads-controls .banner-ads-btn-prev:focus { outline: none; box-shadow: var(--focusShadow); }
.banner-ads-controls .banner-ads-btn-next:after,
.banner-ads-controls .banner-ads-btn-prev:after { display: none; }
.banner-ads-controls .banner-ads-btn-next .icon,
.banner-ads-controls .banner-ads-btn-prev .icon { width: 1.75rem; height: 1.75rem; color: hsl(var(--white)); }
@media (min-width: 568px) {
  .banner-ads-wrap { max-width: 30rem; }
}