/* Skeleton Placeholder Styles */
.image-placeholder {
  display: block;
  width: 100%;
  padding-top: calc(100% / var(--aspect-ratio)); /* Dynamic aspect ratio */
  height: 100%;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

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

.proyect-card__gallery-figure {
  position: relative;
  overflow: hidden;
  --aspect-ratio: 1;
  aspect-ratio: 1 / 1;
}

.real-image {
  opacity: 0;
  transition: opacity 0.3s ease;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.real-image.loaded {
  opacity: 1;
}