.tis-slider {
  --tis-height: auto;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #eeeaf1;
  isolation: isolate;
}
.tis-viewport { position: relative; width: 100%; height: var(--tis-height); overflow: hidden; }
.tis-slide { position: relative; display: none; width: 100%; height: 100%; margin: 0; }
.tis-slide.is-active { display: block; animation: tis-fade-in .35s ease both; }
.tis-image { display: block; width: 100%; height: 100%; max-height: var(--tis-height); object-fit: cover; }
.tis-caption { position: absolute; right: 0; bottom: 0; left: 0; padding: 28px 20px 18px; background: linear-gradient(transparent, #17131dcc); color: #fff; font-size: 14px; line-height: 1.4; }
.tis-arrow { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; transform: translateY(-50%); border: 1px solid #ffffffb5; border-radius: 50%; background: #211c2db8; color: #fff; cursor: pointer; }
.tis-arrow:hover, .tis-arrow:focus-visible { background: #211c2d; }
.tis-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tis-previous { left: 14px; }
.tis-next { right: 14px; }
.tis-dots { position: absolute; right: 70px; bottom: 16px; left: 70px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.tis-dot { width: 10px; height: 10px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: #ffffff80; cursor: pointer; }
.tis-dot.is-active { width: 24px; border-radius: 99px; background: #fff; }
.tis-pause { position: absolute; top: 14px; right: 14px; z-index: 3; padding: 7px 10px; border: 1px solid #ffffffb5; border-radius: 7px; background: #211c2db8; color: #fff; font-size: 12px; cursor: pointer; }
.tis-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tis-empty { padding: 12px; border-left: 3px solid #512a78; background: #f7f3fa; }
@keyframes tis-fade-in { from { opacity: .35; } to { opacity: 1; } }
@media (max-width: 600px) {
  .tis-slider { border-radius: 11px; }
  .tis-previous { left: 8px; }
  .tis-next { right: 8px; }
  .tis-arrow { width: 36px; height: 36px; }
  .tis-caption { padding: 24px 13px 14px; font-size: 12px; }
  .tis-dots { bottom: 11px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .tis-slide.is-active { animation: none; }
}