/* Shared slot geometry keeps the public and Admin Home collages identical. */
.home-collage {
  position: relative;
  left: 50%;
  width: min(1440px, 100vw);
  height: 242px;
  margin-top: 64px;
  transform: translateX(-50%);
}

.collage-photo {
  position: absolute;
  z-index: calc(1 + var(--stack-index, 0));
  top: 0;
  left: 0;
  width: 220px;
  height: 160px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #fff;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(191, 191, 191, 0.25),
    var(--collage-drop-shadow, 0 4px 8px 4px rgba(0, 0, 0, 0.15));
  transform: rotate(var(--rotation, 0deg));
}

.collage-photo::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 2px solid #fff;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.collage-photo:nth-child(1) {
  top: 62px;
  left: 6.46%;
  width: 170px;
  height: 137px;
}

.collage-photo:nth-child(2) {
  top: 22px;
  left: 13.47%;
  width: 155px;
  height: 116px;
}

.collage-photo:nth-child(3) {
  top: 122px;
  left: 13.89%;
  width: 170px;
  height: 114px;
}

.collage-photo:nth-child(4) {
  top: 47px;
  left: 21.94%;
  width: 294px;
  height: 173px;
}

.collage-photo:nth-child(5) {
  top: 26px;
  left: 73.26%;
  width: 281px;
  height: 187px;
}

.collage-photo:nth-child(6) {
  top: 0;
  left: 63.13%;
  width: 157px;
  height: 229px;
}

.collage-photo:nth-child(7) {
  top: 20px;
  left: 37.78%;
  width: 281px;
  height: 187px;
}

.collage-photo:nth-child(8) {
  top: 43px;
  left: 50.83%;
  width: 216px;
  height: 174px;
}

.collage-photo__crop {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
}

.collage-photo__crop > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  object-fit: cover;
  object-position: var(--crop-x, 50%) var(--crop-y, 50%);
  transform: scale(var(--crop-zoom, 1));
  transform-origin: var(--crop-x, 50%) var(--crop-y, 50%);
}

@media (max-width: 620px) {
  .home-collage {
    left: auto;
    display: grid;
    width: 100%;
    height: auto;
    margin-top: 48px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
    align-items: start;
    transform: none;
  }

  .home-collage .collage-photo,
  .home-collage .collage-photo:nth-child(n) {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .home-collage .collage-photo:nth-child(even) {
    margin-top: 18px;
  }

  .home-collage .collage-photo:nth-child(6) {
    aspect-ratio: 3 / 4;
  }

  .home-collage--public {
    display: block;
  }

  .home-collage--public .collage-photo,
  .home-collage--public .collage-photo:nth-child(n) {
    display: none;
  }

  .home-collage--public .collage-photo.collage-photo--mobile-hero,
  .home-collage--public .collage-photo.collage-photo--mobile-hero:nth-child(n) {
    display: block;
    width: calc(100% - 40px);
    margin: 0 auto;
    aspect-ratio: 3 / 2;
    transform: rotate(var(--rotation, 0deg));
  }
}