.photo-pile {
  position: relative;
  width: 500px;  /* wider to accommodate spread */
  height: 300px;
  margin: 0 auto;
}

.photo-pile img {
  position: absolute;
  width: 200px;   /* all side images */
  height: auto;
  border: 4px solid white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* Center image */
.photo-pile img:nth-child(3) {
  width: 160px;    /* main image smaller */
  top: 40px;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 5;
}

/* Left side images */
.photo-pile img:nth-child(1) {
  top: 40px;
  left: -15px;
  transform: rotate(-5deg);
  z-index: 3;
}
.photo-pile img:nth-child(2) {
  top: 130px;
  left: 35px;
  transform: rotate(3deg);
  z-index: 2;
}

/* Right side images */
.photo-pile img:nth-child(4) {
  top: 40px;
  right: 35px;
  transform: rotate(5deg);
  z-index: 3;
}
.photo-pile img:nth-child(5) {
  top: 130px;
  right: -15px;
  transform: rotate(-3deg);
  z-index: 2;
}

/* Hover effect for side images */
.photo-pile img:nth-child(1):hover {
  transform: translateX(-10px) rotate(-5deg);
  z-index: 10;
}
.photo-pile img:nth-child(2):hover {
  transform: translateX(-10px) rotate(3deg);
  z-index: 10;
}
.photo-pile img:nth-child(4):hover {
  transform: translateX(10px) rotate(5deg);
  z-index: 10;
}
.photo-pile img:nth-child(5):hover {
  transform: translateX(10px) rotate(-3deg);
  z-index: 10;
}

/* Center image no movement on hover */
.photo-pile img:nth-child(3):hover {
  transform: translateX(-50%) rotate(0deg);
  z-index: 10;
}
@media (max-width: 768px) {
  .photo-pile {
    width: 300px;
    height: 225px;
  }

  .photo-pile img {
    width: 150px; /* side images */
  }

  .photo-pile img:nth-child(3) {
    width: 200px; /* center image */
    top: 20px;
  }
}

@media (max-width: 480px) {
  .photo-pile {
    width: 300px;   /* smaller container */
    height: 220px;
    margin: 0 auto;
  }

  .photo-pile img {
    position: absolute;
    width: 140px;   /* smaller side images */
    height: auto;
    border: 3px solid white;   /* thinner border for smaller images */
    box-shadow: 0 3px 7px rgba(0,0,0,0.25);
    border-radius: 6px;
    transition: transform 0.3s ease;
  }

  /* Center image smaller */
  .photo-pile img:nth-child(3) {
    width: 110px;   /* smaller main image */
    top: 18px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    z-index: 5;
  }

  /* Left side images */
  .photo-pile img:nth-child(1) {
    top: 28px;
    left: -10px;
    transform: rotate(-5deg);
    z-index: 3;
  }
  .photo-pile img:nth-child(2) {
    top: 95px;
    left: 23px;
    transform: rotate(3deg);
    z-index: 2;
  }

  /* Right side images */
  .photo-pile img:nth-child(4) {
    top: 28px;
    right: 40px;
    width: 140px;
    transform: rotate(5deg);
    z-index: 3;
  }
  .photo-pile img:nth-child(5) {
    top: 95px;
    right: -15px;
    width: 140px;
    transform: rotate(-3deg);
    z-index: 2;
  }

  /* Hover effects */
  .photo-pile img:nth-child(1):hover {
    transform: translateX(-7px) rotate(-5deg);
    z-index: 10;
  }
  .photo-pile img:nth-child(2):hover {
    transform: translateX(-7px) rotate(3deg);
    z-index: 10;
  }
  .photo-pile img:nth-child(4):hover {
    transform: translateX(7px) rotate(5deg);
    z-index: 10;
  }
  .photo-pile img:nth-child(5):hover {
    transform: translateX(7px) rotate(-3deg);
    z-index: 10;
  }

  /* Center image no movement */
  .photo-pile img:nth-child(3):hover {
    transform: translateX(-50%) rotate(0deg);
    z-index: 10;
  }
}