/* Wedding editorial: a studio triptych followed by a location diptych. */
#moments{position:relative}
#moments .moments-heading{display:block;text-align:center;max-width:780px;margin-inline:auto}
#moments .moments-heading h2{font-size:clamp(39px,5.4vw,72px);letter-spacing:-2px;line-height:1.08}
#moments .moments-heading>p{font-size:11px;line-height:1.9;margin:20px auto 0;max-width:330px}
#moments .album-grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 20px;margin-top:36px;padding:45px 0 32px;align-items:center}
#moments .photo-slot{margin:0;min-width:0;transform:none;position:relative}
#moments .photo-slot:nth-child(1){grid-column:5/span 4;grid-row:1}
#moments .photo-slot:nth-child(2){grid-column:1/span 6;grid-row:2;align-self:start}
#moments .photo-slot:nth-child(3){grid-column:1/span 3;grid-row:1;align-self:center}
#moments .photo-slot:nth-child(4){grid-column:7/span 6;grid-row:2;align-self:start}
#moments .photo-slot:nth-child(5){grid-column:10/span 3;grid-row:1;align-self:center}
#moments .photo-inner{display:block;position:relative;aspect-ratio:2/3;width:100%;height:auto;min-height:0;padding:0;border:0;outline:0;box-shadow:none;background:transparent;color:var(--ink)}
#moments .photo-inner:before,#moments .photo-inner:after{display:none}
#moments .album-photo{display:block;width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
#moments .photo-slot figcaption.sr-only{margin:0;display:block}
/* Matching arches join the two individual portraits; the central couple stays rectangular. */
#moments .album-populated[data-count="5"] .photo-slot:nth-child(3) .photo-inner,
#moments .album-populated[data-count="5"] .photo-slot:nth-child(5) .photo-inner{border-radius:50% 50% 0 0}
/* All lettering stays outside the images. */
#moments .album-populated[data-count="5"]:before{content:'Đức Thắng & Phương Thảo';position:absolute;top:0;left:0;width:100%;text-align:center;font:italic clamp(20px,2.2vw,30px)/1.4 var(--serif);color:var(--gold);letter-spacing:-.5px;pointer-events:none}
#moments .album-populated[data-count="5"]:after{content:'01 — 05  /  OUR WEDDING';position:absolute;bottom:0;left:0;width:100%;text-align:center;font:9px/1.7 var(--sans);letter-spacing:2px;color:var(--olive);pointer-events:none}
#moments .album-grid:not(.album-populated){padding:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#moments .album-grid:not(.album-populated) .photo-slot{grid-column:auto;grid-row:auto;align-self:center}
#moments .album-grid:not(.album-populated) .photo-inner{background:rgba(160,165,140,.12)}
#moments .album-grid:not(.album-populated) .photo-wide{grid-column:1/-1}
#moments .album-grid:not(.album-populated) .photo-wide .photo-inner{aspect-ratio:2.25}
@media(hover:hover) and (pointer:fine){#moments .photo-slot:hover{transform:none}}
/* Partial albums keep a simple, predictable flow until all five photos are selected. */
#moments .album-populated:not([data-count="5"]){grid-template-columns:repeat(2,minmax(0,1fr));padding:0;gap:20px}
#moments .album-populated:not([data-count="5"]) .photo-slot{grid-column:auto;grid-row:auto;align-self:center}
#moments .album-populated[data-count="1"] .photo-slot{grid-column:1/-1;width:65%;justify-self:center}
#moments .album-populated[data-count="3"] .photo-slot:nth-child(3){grid-column:1/-1;width:65%;justify-self:center}
@media(max-width:760px){
 #moments .moments-heading h2{font-size:clamp(37px,10.8vw,58px);letter-spacing:-1.5px;max-width:350px;margin-inline:auto}
 #moments .moments-heading>p{font-size:10px;margin-top:18px;max-width:240px}
 #moments .album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;margin-top:26px;padding:39px 0 29px;align-items:start}
 #moments .photo-slot:nth-child(1){grid-column:1/-1;grid-row:1;width:86%;justify-self:center}
 #moments .photo-slot:nth-child(2){grid-column:1;grid-row:3;align-self:start}
 #moments .photo-slot:nth-child(3){grid-column:1;grid-row:2;align-self:start}
 #moments .photo-slot:nth-child(4){grid-column:2;grid-row:3;align-self:start}
 #moments .photo-slot:nth-child(5){grid-column:2;grid-row:2;align-self:start}
 #moments .album-populated[data-count="5"]:before{font-size:21px}
 #moments .album-populated[data-count="5"]:after{font-size:8px;letter-spacing:1.6px}
 #moments .album-populated:not([data-count="5"]) .photo-slot{width:auto;justify-self:stretch}
 #moments .album-populated[data-count="1"] .photo-slot,#moments .album-populated[data-count="3"] .photo-slot:nth-child(3){width:100%}
}
@supports not (aspect-ratio:1){
 #moments .photo-inner{height:0;padding-top:150%}
 #moments .album-grid:not(.album-populated) .photo-wide .photo-inner{padding-top:44.444%}
}