.sedec-banner {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: var(--sedec-banner-bg, #0c235a);
  margin-bottom: var(--sedec-banner-margin-bottom, 0);
  overflow: hidden;
  isolation: isolate;
}

.sedec-banner--shadow {
  box-shadow: 0 14px 18px -16px rgba(0, 0, 0, .85);
}

.sedec-banner__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: var(--sedec-banner-ratio);
  overflow: hidden;
}

.sedec-banner__stage {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--stage-width);
  height: var(--stage-height);
  transform: scale(var(--stage-scale, 1));
  transform-origin: 0 0;
}

.sedec-banner__slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .55s ease, visibility .55s ease;
  pointer-events: none;
}

.sedec-banner__slide.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.sedec-banner__slide::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  content: "";
}

.sedec-banner--overlay-twoxtwo .sedec-banner__slide::after {
  background-image: url("../images/gridtile.png");
  background-size: calc(2px / var(--stage-scale, 1)) calc(2px / var(--stage-scale, 1));
}

.sedec-banner--overlay-threexthree .sedec-banner__slide::after {
  background-image: url("../images/gridtile_3x3.png");
  background-size: calc(3px / var(--stage-scale, 1)) calc(3px / var(--stage-scale, 1));
}

.sedec-banner__background {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.sedec-banner__slide-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.sedec-banner__layer {
  position: absolute;
  z-index: 3;
  left: var(--left, 0);
  top: var(--top, 0);
  width: var(--layer-width, auto);
  height: var(--layer-height, auto);
  max-width: none;
  opacity: 1;
  --layer-translate-x: 0;
  --layer-translate-y: 0;
  transform: translate(var(--layer-translate-x), var(--layer-translate-y));
}

.sedec-banner__layer[data-align-h="center"] { left: calc(50% + var(--left, 0px)); --layer-translate-x: -50%; }
.sedec-banner__layer[data-align-h="right"] { left: auto; right: var(--left, 0); }
.sedec-banner__layer[data-align-v="middle"] { top: calc(50% + var(--top, 0px)); --layer-translate-y: -50%; }
.sedec-banner__layer[data-align-v="bottom"] { top: auto; bottom: var(--top, 0); }
.sedec-banner__layer img { display: block; max-width: none; width: 100%; height: 100%; object-fit: contain; }
.sedec-banner__caption {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 8%;
  max-width: 80%;
  transform: translateX(-50%);
  padding: .7rem 1rem;
  color: #fff;
  background: rgba(0, 0, 0, .62);
  font-size: clamp(1rem, 2vw, 2rem);
}

.sedec-banner__arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  translate: 0 -50%;
  width: 44px;
  height: 58px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: rgba(0, 0, 0, .4);
  font: 400 42px/1 Arial, sans-serif;
  cursor: pointer;
}

.sedec-banner__arrow:hover,
.sedec-banner__arrow:focus-visible { background: rgba(0, 0, 0, .72); }
.sedec-banner__arrow--prev { left: 18px; }
.sedec-banner__arrow--next { right: 18px; }

.sedec-banner__dots {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 16px;
  display: flex;
  gap: 8px;
  translate: -50% 0;
}

.sedec-banner__dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  cursor: pointer;
}

.sedec-banner__dots button.is-active { background: #fff; }
.sedec-banner--controls-auto .sedec-banner__arrow,
.sedec-banner--controls-auto .sedec-banner__dots {
  opacity: 0;
  transition: opacity .2s ease;
}
.sedec-banner--controls-auto:hover .sedec-banner__arrow,
.sedec-banner--controls-auto:hover .sedec-banner__dots,
.sedec-banner--controls-auto:focus-within .sedec-banner__arrow,
.sedec-banner--controls-auto:focus-within .sedec-banner__dots {
  opacity: 1;
}
.anim-fade { animation-name: sedec-fade; }
.anim-from-left { animation-name: sedec-from-left; }
.anim-from-right { animation-name: sedec-from-right; }
.anim-from-top { animation-name: sedec-from-top; }
.anim-from-bottom { animation-name: sedec-from-bottom; }
.anim-zoom { animation-name: sedec-zoom; }
@keyframes sedec-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sedec-from-left { from { opacity: 0; translate: -80px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes sedec-from-right { from { opacity: 0; translate: 80px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes sedec-from-top { from { opacity: 0; translate: 0 -50px; } to { opacity: 1; translate: 0 0; } }
@keyframes sedec-from-bottom { from { opacity: 0; translate: 0 50px; } to { opacity: 1; translate: 0 0; } }
@keyframes sedec-zoom { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sedec-banner__slide { transition: none; }
}

@media (hover: none) {
  .sedec-banner--controls-auto .sedec-banner__arrow,
  .sedec-banner--controls-auto .sedec-banner__dots {
    opacity: 1;
  }
}