/* Banner je mensi a okraje plynule prechazeji do pozadi. */
.hero-slider, .ks-banner { position: relative; overflow: hidden; }
.hero-slide, .ks-slide { display: none; }
.hero-slide.is-active, .ks-slide.is-active { display: block; }
.ks-banner .ks-slide {
  display: block; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .72s ease, visibility 0s linear .72s;
}
.ks-banner .ks-slide.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .72s ease, visibility 0s;
}
.hero-slide > img, .ks-slide > img, .hero-slide a > img, .ks-slide a > img {
  display: block; width: 70%; height: auto; margin-inline: auto;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%);
}
.hero-slider-control, .hero-slider-dots { position: absolute; z-index: 2; }
.hero-slider-control { top: 50%; transform: translateY(-50%); }
.hero-slider-prev { left: 8px; }
.hero-slider-next { right: 8px; }
.hero-slider-dots { bottom: 10px; left: 50%; display: flex; gap: 6px; transform: translateX(-50%); }
.hero-slider-dots [role="tab"] { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 60%); cursor: pointer; }
.hero-slider-dots [role="tab"].is-active { background: #fff; }