.hero-collage { height: 540px; isolation: isolate; }
.hero-collage .halo { width: 455px; height: 455px; }
.collage-piece { position: absolute; overflow: hidden; background: var(--paper); border: 7px solid var(--paper); box-shadow: 0 18px 38px rgba(72, 47, 32, .22); }
.collage-piece img { width: 100%; height: 100%; display: block; object-fit: cover; }
.collage-primary { z-index: 2; width: 68%; height: 348px; left: 10%; top: 82px; transform: rotate(2.5deg); }
.collage-top { z-index: 3; width: 43%; height: 165px; right: 0; top: 0; transform: rotate(6deg); }
.collage-bottom { z-index: 3; width: 40%; height: 155px; left: 0; bottom: 22px; transform: rotate(-7deg); }
.hero-collage .art-caption { z-index: 4; left: 42%; bottom: -3px; }
@media (max-width: 760px) { .hero-collage { height: 390px; }.hero-collage .halo { width: 315px; height: 315px; }.collage-primary { width: 76%; height: 245px; left: 14%; top: 55px; }.collage-top { width: 43%; height: 105px; }.collage-bottom { width: 41%; height: 98px; bottom: 29px; }.hero-collage .art-caption { left: 24%; bottom: -30px; } }