.simple-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 560px;
}

@media (max-width: 900px) {
	.simple-slider {
	  height: 400px;
	}
}
@media (max-width: 600px) {
	.simple-slider {
	  height: 300px;
	}
}

.simple-slider .slide {
  position: absolute;    /* nutné, aby se navzájem překrývaly */
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.simple-slider .slide.active {
  opacity: 1;
}

.simple-slider .slide-overlay {
  position: absolute;    /* a teď už relativně vůči .slide (které má position:absolute – pořád to je „positioned“ prvek) */
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  pointer-events: none;
  z-index: 2;
}