/* Collage — a photo on the table with a polaroid dropped on top, breaking out of the section */

/* Bleeds off the left edge, like the old site; the other edges fade into the section */
.collage {
  position: relative;
  margin: 3rem 0 0 -1.25rem;
}
.collage__base {
  width: 100%;
  height: auto;
  -webkit-mask:
    linear-gradient(90deg, #000 72%, transparent),
    linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, #000 72%, transparent),
    linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}
.collage__polaroid {
  position: absolute;
  top: -18%;
  left: 34%;
  z-index: 2;
  width: 46%;
  height: auto;
  filter: drop-shadow(0 18px 24px rgba(36, 28, 24, 0.25));
  transform: rotate(4deg);
  transition: transform 0.4s ease;
}
.collage:hover .collage__polaroid {
  transform: rotate(1deg) translateY(-6px);
}

@media (min-width: 768px) {
  .collage {
    margin-left: -2rem;
  }
}
@media (min-width: 1024px) {
  .collage {
    margin: 0 0 0 calc(-1 * (max(0px, (100vw - var(--container)) / 2) + 2rem));
  }
}