.image-collage {
  width: 100%;
  padding: clamp(20px, 4vw, 56px) 0;
}

.image-collage__stage {
  position: relative;
  width: min(100%, 1120px);
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  perspective: 1200px;
}

.image-collage__photo {
  position: absolute;
  width: 35%;
  aspect-ratio: 3 / 4;
  margin: 0;
  padding: 5px;
  overflow: hidden;
  background: #f7f7f4;
  border-radius: 4px;
  box-shadow:
    0 8px 12px rgba(27, 20, 14, 0.14),
    0 24px 38px rgba(27, 20, 14, 0.18);
  transform-origin: 50% 70%;
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 500ms ease,
    filter 500ms ease;
  will-change: transform;
}

.image-collage__photo--1 {
  z-index: 1;
  top: 12%;
  left: 4%;
  transform: rotate(12deg);
}

.image-collage__photo--2 {
  z-index: 3;
  top: 5%;
  left: 32.5%;
  transform: rotate(-5deg);
}

.image-collage__photo--3 {
  z-index: 2;
  top: 14%;
  right: 3%;
  transform: rotate(3deg);
}

.image-collage__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-collage-placeholder {
  padding: 32px;
  color: #323232;
  text-align: center;
  background: #fff0cf;
  border: 1px dashed #ff6014;
}

@media (hover: hover) and (pointer: fine) {
  .image-collage__stage:hover .image-collage__photo--1 {
    filter: saturate(1.05);
    transform: translate3d(-18px, -8px, 24px) rotate(8deg) scale(1.025);
  }

  .image-collage__stage:hover .image-collage__photo--2 {
    filter: saturate(1.08) brightness(1.03);
    box-shadow:
      0 14px 20px rgba(27, 20, 14, 0.16),
      0 34px 54px rgba(27, 20, 14, 0.24);
    transform: translate3d(0, -22px, 52px) rotate(-2deg) scale(1.045);
  }

  .image-collage__stage:hover .image-collage__photo--3 {
    filter: saturate(1.05);
    transform: translate3d(18px, -8px, 24px) rotate(7deg) scale(1.025);
  }
}

@media (max-width: 767px) {
  .image-collage__stage {
    width: calc(100% - 12px);
    aspect-ratio: 1.28 / 1;
  }

  .image-collage__photo {
    width: 41%;
    padding: 6px;
  }

  .image-collage__photo--1 {
    top: 18%;
    left: 0;
  }

  .image-collage__photo--2 {
    top: 8%;
    left: 29.5%;
  }

  .image-collage__photo--3 {
    top: 20%;
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-collage__photo {
    transition: none;
  }
}