/* The Christmas page's own passages, in page order. Served on /christmas only, after styles.css (which holds the
   opening, shared with the ways' own pages, and the dates). */

/* ---------- out all day, in for movie night (data-section="christmas-day") ----------
   The lazy river large, the living room beside it, and the guest who spent Christmas here in her own words. */
.xm-day{padding-block:clamp(56px, 7vw, 120px);border-top:1px solid var(--line);margin-top:clamp(40px, 5vw, 88px)}
.xm-day-head p{margin-top:12px;font-size:clamp(16px, 15px + .2vw, 18px);line-height:1.6;color:var(--mist);max-width:34em}
.xm-day-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 12px;margin-top:clamp(26px, 3vw, 44px)}
.xd-a{grid-column:1 / -1}
.xd-a .photo{aspect-ratio:4/3}
.xd-b .photo{aspect-ratio:4/5}
.xd-voice{align-self:end}
.xd-voice .review{font-size:15px}
@media (max-width:599.98px){ .xd-voice{grid-column:1 / -1} .xd-b{grid-column:1 / -1} .xd-b .photo{aspect-ratio:4/3} }
@media (min-width:900px){
  .xm-day-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .xm-day-head h2{grid-column:1 / 6}
  .xm-day-head p{grid-column:6 / 13;margin:0;justify-self:end;max-width:31em}
  .xm-day-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0;align-items:end}
  .xd-a{grid-column:1 / 8}
  .xd-b{grid-column:8 / 13}
  .xd-a .photo,.xd-b .photo{aspect-ratio:auto;height:clamp(320px, 34vw, 560px)}
  .xd-voice{grid-column:8 / 13;margin-top:clamp(24px, 2.4vw, 36px)}
  .xd-voice .review{font-size:16px}
}

/* ---------- everyone round one table (data-section="one-table") ---------- */
.xm-table{background:var(--pool);padding-block:clamp(56px, 8vw, 130px)}
.xm-table-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 12px}
.xm-table-words{grid-column:1 / -1}
.xm-table-words p{margin-top:12px;font-size:clamp(16px, 15px + .2vw, 18px);line-height:1.6;max-width:32em}
.xm-table-words .more{margin-top:6px}
.xm-table .photo{aspect-ratio:4/5}
@media (min-width:900px){
  .xm-table-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center}
  .xm-table-words{grid-column:1 / 6}
  .xt-a{grid-column:6 / 9}
  .xt-b{grid-column:9 / 13}
  .xt-a .photo,.xt-b .photo{aspect-ratio:auto;height:clamp(340px, 34vw, 560px)}
}

/* ---------- the parks at Christmas (data-section="parks-at-christmas") ---------- */
.xm-parks{padding-block:clamp(56px, 7vw, 120px)}
.xm-parks-words p{margin-top:14px;font-size:clamp(16px, 15px + .2vw, 18px);line-height:1.6;max-width:36em}
.xm-parks-words .more{margin-top:8px}
@media (min-width:900px){
  .xm-parks-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
  .xm-parks h2{grid-column:1 / 6}
  .xm-parks-words{grid-column:6 / 13;justify-self:end}
  .xm-parks-words p:first-child{margin-top:0}
}