/* photo pile https://ribo.zone/free/snippets/#photopile */
.photopile { 
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin-top:30px;
  margin-bottom:30px;
}
.photopile figure { 
  display: inline-block;
  max-width: 40%;
  background: white;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  transform: rotate(2deg);
  margin: 0 -25px;
}
.photopile figure img {
  max-width: calc(100% - 2rem);
  margin: 1rem 1rem 0 1rem;
  border: 2px rgb(0,0,0,0.55) inset;
}
.photopile figcaption {
  text-align: center;
  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 1rem;
  color: black;
}
.photopile figure:hover { 
  z-index: 3;
}
.photopile figure:nth-child(2n) { 
  transform: rotate(-10deg);
}
.photopile figure:nth-child(3n) {
  transform: rotate(5deg);
}
.photopile figure:nth-child(4n) { 
  transform: rotate(4deg);
}
.photopile figure:nth-child(5n) { 
  transform: rotate(-2deg);
}
.photopile figure:nth-child(6n) {
  transform: rotate(-7deg);
}





/* taped */

.taped {
  position: relative;
  display: inline-block; /* ← ensures wrapper sizes to image width */
  margin-bottom:20px;
  margin-top:30px;
}

.taped img {
  display: block; /* removes inline whitespace but does NOT force width */
  height: auto;
  width: 80%; /* important: does NOT stretch */
}

.tape {
  position: absolute;
  width: 65px;
  height: 22px;
  background: rgba(200,200,50,0.35);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  z-index: 5;
  pointer-events: none;
}

/* Top left */
.tape.tl {
  top: -12px;
  left: -12px;
  transform: rotate(-18deg);
}

/* Top right */
.label {
  
  height: auto;
  width:100%;
  background: rgba(200,200,50,0.35);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  z-index: 5;
  pointer-events: none;
  transform: rotate(-1deg);
  
}

@media only screen and (max-width: 600px) {


.photopile figure { 
  display: inline-block;
  max-width: 60%;
  background: white;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  transform: rotate(2deg);
  margin: 0 -25px;
}

}