.anim-pic {
  width: 38rem;
  height: 30rem;  
  overflow: hidden;
  position: relative;
  background: hsla(var(--clr-white) / 0.4);
}

/* Všetky slidy položíme cez seba a predvolene ich schováme */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; 
}

/* Iba aktívny slide sa zobrazí */
.slide.active {
  display: block;
}

.zaves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: hsla(var(--clr-0) / 1);
  border-right: 1px solid #ffffff;
  opacity: 1;
  z-index: 8; 
}

/* Animáciu spustíme IBA vtedy, keď má rodič (.slide) triedu .active */
.slide.active .zaves {
  animation: odsuvZavesu 1.6s ease-in-out both;
}

@keyframes odsuvZavesu {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.one-pic {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  opacity: 0;
  z-index: 7; 
}

/* Animáciu spustíme IBA vtedy, keď má rodič (.slide) triedu .active */
.slide.active .one-pic {
  animation: zobrazenieObrazka 6s linear both;
}

@keyframes zobrazenieObrazka {
  0% { opacity: 0; }
  10% { opacity: 0; }
  35% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}