.img-container {
  position: relative;
  min-height: 400px;
}

@media (max-width: 767px) {
  .img-container {
    min-height: 53.3333vw;
  }
}
.img-container img {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.img-container .loaded {
  opacity: 1;
}

.img-container .placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400% 400%;
  animation: placeholder-shimmer 1.5s linear infinite;
  z-index: 1;
}

.img-container img.loaded {
  opacity: 1;
  z-index: 1;
}

@keyframes placeholder-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}