/**
 * Collage — full-bleed background photo overlaid with three polaroid-style
 * smaller photos. All four image-slots are independently fillable.
 */
function Collage() {
  return (
    <section
      id="collage"
      className="section collage"
      data-screen-label="Collage">
      
      <div className="collage-bg">
        <image-slot id="collage-bg" placeholder="Background photo" shape="rect"></image-slot>
      </div>
      <div className="collage-overlay">
        <div className="photo-frame collage-poly collage-poly--up">
          <image-slot id="collage-1" placeholder="Polaroid 1" shape="rect"></image-slot>
        </div>
        <div className="photo-frame collage-poly collage-poly--mid">
          <image-slot id="collage-2" placeholder="Polaroid 2" shape="rect"></image-slot>
        </div>
        <div className="photo-frame collage-poly collage-poly--down">
          <image-slot id="collage-3" placeholder="Polaroid 3" shape="rect"></image-slot>
        </div>
      </div>
    </section>);

}

if (typeof window !== "undefined") window.Collage = Collage;