.embla { position: relative; width: 100%; max-width: 700px; margin: 0 auto; }
.embla__viewport { overflow: hidden; border-radius: 12px; }
.embla__container { display: flex; }
.embla__slide { flex: 0 0 100%; min-width: 0; display: flex; align-items: center; justify-content: center; }
.embla__slide img, .embla__slide video {
  width: 100%; height: auto; max-height: 76vh; object-fit: contain; border-radius: 12px; background: #111;
}
.embla__button {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 0; z-index: 10;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.85); color: #333; font-size: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: background .2s, color .2s;
  display: flex; align-items: center; justify-content: center;
}
.embla__button--prev { left: -24px; }
.embla__button--next { right: -24px; }
.embla__button:disabled { opacity: 0.3; cursor: default; }
.embla__dots {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 5;
}
.embla__dot {
  width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.6);
  border: none; cursor: pointer; transition: background .2s;
}
.embla__dot--selected { background: #39c170; }