.photo-stack-container {
  position: relative;
  width: 800px;
  height: 500px;
  margin: 10px auto 100px auto;
  overflow: visible;
}

.photo-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.photo-stack .card {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain; /* statt cover */
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.5s ease-in-out;
}

.card.with-radius {
  border-radius: 12px;
}
.photo-stack .card.shadow-light {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.photo-stack .card.shadow-medium {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.photo-stack .card.shadow-strong {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
@media (max-width: 768px) {
  .photo-stack-container {
    width: 100%;
    max-width: 100%;
    height: 70vw;
    margin: 1px auto 40px auto;
    overflow: hidden;
    position: relative;
  }

  .photo-stack {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .photo-stack .card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translateX(15%) scale(0.95);
    z-index: 0;
    opacity: 0.2;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }

  .photo-stack .card.active {
    transform: translateX(0) scale(1);
    z-index: 10;
    opacity: 1;
  }


}