.er-row-wrap{max-width:1200px;margin:0 auto;padding:0 0px 20px;box-sizing:border-box;font-family:'Dazzed',Arial,Helvetica,sans-serif;}
.er-row{display:flex;border-radius:4px;overflow:hidden;}
.er-cell{position:relative;flex:1 1 0;min-width:0;height:485px;overflow:hidden;background:#0E151D;}
.er-cell-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.er-cell-solid{position:absolute;inset:0;}
.er-grad{position:absolute;inset:0;}
.er-grad-left{background:linear-gradient(90deg,var(--sc) 1%,transparent 99%);}
.er-grad-right{background:linear-gradient(270deg,var(--sc) 1%,transparent 99%);}
.er-cell-text{position:absolute;top:50%;transform:translateY(-50%);font-weight:500;font-size:var(--tsize);line-height:1.2;padding:0 40px;box-sizing:border-box;}
.er-text-center{left:0;right:0;text-align:center;}
.er-text-left{left:0;width:70%;text-align:left;}
.er-text-right{right:0;width:70%;text-align:right;}
/* Mobile stack. Scoped to :not(.dgi-deck-slide) so a 16:9 deck slide keeps its
   side-by-side row at every width (deck mode sizes off container queries).
   flex:none is required: the base rule is flex:1 1 0, and once the row turns to
   flex-direction:column the main axis is vertical, so flex-basis:0 overrides
   height:280px and every cell collapses to 0. Do not remove it, or the whole
   photo row disappears below 900px. */
@media (max-width:900px){
  .er-row-wrap:not(.dgi-deck-slide) .er-row{flex-direction:column;}
  .er-row-wrap:not(.dgi-deck-slide) .er-cell{flex:none;height:280px;}
  .er-row-wrap:not(.dgi-deck-slide) .er-cell-text{font-size:32px;}
}
/* Stacked cells are 4:5 rather than a fixed 280px (Rachel, 2026-09-28). The
   event photos are 3:4 portrait originals, so a 280px-tall landscape cell was
   cutting faces off top and bottom under object-fit:cover.
   EVERY CELL GETS IT, not just the photo ones. A row can hold any mix of the
   three Type values (Image, Image + Text over a gradient, and Text on a solid
   plate) at 1, 2 or 3 cells, and they have to read as one row, so a single box
   shape applies to all of them. Do not special-case the text cells; that was
   tried and it split one row into two different heights.
   Headline goes to 42px to stay proportionate to the taller box. That is not a
   new number: a stacked cell at phone width (~390px) is the same size as a
   desktop 3-column cell (1200/3 = 400px), where the module already renders its
   headline at 42px via --tsize. The old 32px was sized for the squat 280px box.
   The 280px above stays as the aspect-ratio fallback: the children are
   position:absolute, so a browser without aspect-ratio support would collapse
   the cell to 0 and the whole row would vanish, which is the bug fixed on
   2026-09-25. */
@supports (aspect-ratio: 4 / 5){
  @media (max-width:900px){
    .er-row-wrap:not(.dgi-deck-slide) .er-cell{height:auto;aspect-ratio:4 / 5;}
    .er-row-wrap:not(.dgi-deck-slide) .er-cell-text{font-size:42px;}
  }
}

/* "Show full photo (one photo only)": the single photo sets the row's height at
   its own aspect ratio, so nothing is cropped (Trisha, 2026-09-28). Only applied
   when the row has one cell and deck slide mode is off (the class is set in
   module.html). The extra .er-full class outranks the 4:5 mobile rule above. */
.er-row-wrap.er-full:not(.dgi-deck-slide) .er-cell{height:auto;aspect-ratio:auto;}
.er-row-wrap.er-full:not(.dgi-deck-slide) .er-cell-img{position:static;height:auto;}

/* ===== Deck slide mode (16:9) — toggled by "Use as deck slide" ===== */
.er-row-wrap.dgi-deck-slide{ max-width:none; margin:0; padding:0; }
.er-row-wrap.dgi-deck-slide .er-row{ height:100%; border-radius:0; }
.er-row-wrap.dgi-deck-slide .er-cell{ height:100%; }
.er-row-wrap.dgi-deck-slide .er-cell-text{ padding:0 3.33cqw; }