/* "Our moments" gallery */
.moments {
    margin-top: 56px;
    position: relative;
}
/* When the days-counter sits directly above, give it more breathing room. */
.days-counter + .moments { margin-top: 56px; }
.moments .section-head { margin-bottom: 26px; }
.moments .section-head p { margin-top: 8px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: var(--ink-soft); }

.moments-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 110px;
    gap: 12px;
}
.moments-grid .frame {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: var(--blush);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 30px -16px rgba(146,82,106,.28);
    transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.moments-grid .frame:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 50px -22px rgba(146,82,106,.4);
}
.moments-grid img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--t-slow), filter var(--t-mid);
    filter: saturate(1) brightness(1);
}
.moments-grid .frame:hover img { transform: scale(1.06); filter: saturate(1.06) brightness(1.02); }
.moments-grid .frame::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255, 235, 230, 0) 60%, rgba(124, 58, 74, .18) 100%);
    pointer-events: none;
}
.moments-grid .frame:nth-child(1)  { grid-column: span 5; grid-row: span 3; }
.moments-grid .frame:nth-child(2)  { grid-column: span 4; grid-row: span 2; }
.moments-grid .frame:nth-child(3)  { grid-column: span 3; grid-row: span 2; }
.moments-grid .frame:nth-child(4)  { grid-column: span 3; grid-row: span 2; }
.moments-grid .frame:nth-child(5)  { grid-column: span 4; grid-row: span 2; }
.moments-grid .frame:nth-child(6)  { grid-column: span 4; grid-row: span 3; }
.moments-grid .frame:nth-child(7)  { grid-column: span 4; grid-row: span 2; }
.moments-grid .frame:nth-child(8)  { grid-column: span 4; grid-row: span 2; }
.moments-grid .frame:nth-child(9)  { grid-column: span 3; grid-row: span 2; }
.moments-grid .frame:nth-child(10) { grid-column: span 5; grid-row: span 2; }
.moments-grid .frame:nth-child(11) { grid-column: span 4; grid-row: span 2; }
.moments-grid .frame:nth-child(12) { grid-column: span 3; grid-row: span 2; }