.gallery-album { overflow: hidden; padding-bottom: clamp(5rem, 9vw, 8rem); background: radial-gradient(circle at 50% 20%, rgba(216,184,132,.18), transparent 26rem), linear-gradient(180deg, #f5eee6, #e8d9ca); }
.gallery-album::before { content: "The moments we will always return to"; display: block; width: fit-content; max-width: calc(100% - 2rem); margin: -1.1rem auto 1.8rem; padding: .65rem 1.25rem; border-top: 1px solid rgba(185,139,128,.55); border-bottom: 1px solid rgba(185,139,128,.55); color: #725c53; text-align: center; font: italic clamp(1.05rem, 2.5vw, 1.4rem) var(--serif); letter-spacing: .045em; }
.gallery-album::after { content: "a collection of our favorite forever"; display: block; margin: 1.6rem auto -3.8rem; color: #8b665b; text-align: center; font: 500 .56rem var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.gallery-album-row { position: relative; width: min(100%, 1240px); margin-inline: auto; padding: .6rem; border: 1px solid rgba(102,63,54,.28); background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(223,201,184,.52)); box-shadow: 0 16px 32px rgba(76,30,35,.11), inset 0 0 0 5px rgba(255,250,243,.6); }
.gallery-album-row::before { content: "✦   OUR LOVE ON FILM   ✦"; position: absolute; z-index: 3; top: -.64rem; left: 50%; padding: .22rem .8rem; border: 1px solid rgba(185,139,128,.52); background: #f5eee6; color: #8b665b; font: 500 .48rem var(--sans); letter-spacing: .18em; transform: translateX(-50%); white-space: nowrap; }
.gallery-album-row-bottom { margin-top: 1.65rem; }.gallery-album-row-bottom::before { content: "✦   A STORY IN FRAMES   ✦"; }
.gallery-album-frame { position: relative; width: min(100vw, 1220px); margin-inline: auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; touch-action: pan-y; }.gallery-album-frame::-webkit-scrollbar { display: none; }
.gallery-album-frame::before,.gallery-album-frame::after { content: ""; position: absolute; z-index: 4; top: 0; bottom: 0; width: clamp(1rem, 5vw, 4.5rem); pointer-events: none; }.gallery-album-frame::before { left: 0; background: linear-gradient(90deg, rgba(242,231,216,.95), transparent); }.gallery-album-frame::after { right: 0; background: linear-gradient(270deg, rgba(242,231,216,.95), transparent); }.gallery-album-frame.is-dragging { cursor: grabbing; }
.gallery-album .gallery-grid { display: flex; gap: clamp(.8rem, 1.8vw, 1.35rem); width: max-content; max-width: none; margin: 0; padding: 1.45rem max(1.4rem, 5vw) 1.2rem; columns: unset; }
.gallery-album .gallery-item { position: relative; flex: 0 0 clamp(190px, 26vw, 272px); aspect-ratio: 4 / 5; overflow: hidden; padding: .45rem; border: 1px solid rgba(89,49,43,.26); border-radius: 2px; background: #fcf7f0; box-shadow: 0 12px 20px rgba(76,30,35,.15); transform: rotate(var(--album-tilt, 0deg)); transition: transform .35s ease, box-shadow .35s ease; }
.gallery-album .gallery-item:nth-child(3n+1) { --album-tilt: -1.3deg; }.gallery-album .gallery-item:nth-child(3n+2) { --album-tilt: .9deg; }.gallery-album .gallery-item:nth-child(3n) { --album-tilt: -.4deg; }.gallery-album-row-bottom .gallery-item:nth-child(3n+1) { --album-tilt: .8deg; }.gallery-album-row-bottom .gallery-item:nth-child(3n+2) { --album-tilt: -1.15deg; }.gallery-album-row-bottom .gallery-item:nth-child(3n) { --album-tilt: .35deg; }
.gallery-album .gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255,255,255,.14), transparent 35%, rgba(76,30,35,.12)); pointer-events: none; }.gallery-album .gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: sepia(.05) contrast(1.03) saturate(.94); }.gallery-album .gallery-caption { display: none; }
.gallery-album-row-top .gallery-item:nth-child(2) img { object-position: 58% center; }
.gallery-album .gallery-item:hover,.gallery-album .gallery-item:focus-visible { transform: translateY(-.45rem) rotate(0); box-shadow: 0 22px 38px rgba(76,30,35,.24); }.gallery-album .gallery-item:focus-visible { outline: 2px solid #b98b80; outline-offset: 5px; }
@media (max-width: 699px) { .gallery-album { padding-bottom: 5.5rem; }.gallery-album::before { margin-top: -1rem; margin-bottom: 1.45rem; padding-inline: .7rem; }.gallery-album::after { margin-bottom: -3.4rem; font-size: .48rem; letter-spacing: .14em; }.gallery-album-row { width: calc(100% + 1rem); margin-left: -.5rem; padding: .4rem; }.gallery-album-row-bottom { margin-top: 1.4rem; }.gallery-album-row::before { font-size: .4rem; letter-spacing: .11em; }.gallery-album-frame { width: calc(100% + 2.8rem); margin-left: -1.4rem; }.gallery-album .gallery-grid { gap: .7rem; padding: 1.15rem 1.4rem .9rem; }.gallery-album .gallery-item { flex-basis: clamp(166px, 56vw, 210px); } }
@media (prefers-reduced-motion: reduce) { .gallery-album .gallery-item { transition: none; } }