/* Below 1100px the photos wrapped to two rows and the tabs to two rows BELOW them,
   so "Today" sat under the fifth photo instead of the first. The two blocks are
   woven into one grid: photos 1-4, tabs 1-4, photos 5-8, tabs 5-8 — so each tab is
   directly under its own picture.
   Both wrappers use display:contents so their children become items of the shared
   grid; without that the two rows cannot interleave at all. */
@media (max-width:1100px){
  #rstWrap{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    column-gap:8px; row-gap:6px;
    align-items:start;
  }
  #rstWrap > #rsStrip,
  #rstWrap > #rsStrip > .rst-row,
  #rstWrap > .overflow-x-auto,
  #rstWrap > .overflow-x-auto > .flex{ display:contents !important; }

  /* photos 1-4 on row 1, their tabs on row 2; photos 5-8 on row 3, tabs on row 4 */
  #rstWrap .rst-i:nth-child(1),#rstWrap .rst-i:nth-child(2),
  #rstWrap .rst-i:nth-child(3),#rstWrap .rst-i:nth-child(4){ grid-row:1; }
  #rstWrap .rst-i:nth-child(5),#rstWrap .rst-i:nth-child(6),
  #rstWrap .rst-i:nth-child(7),#rstWrap .rst-i:nth-child(8){ grid-row:3; }
  #rstWrap .flex > *:nth-child(1),#rstWrap .flex > *:nth-child(2),
  #rstWrap .flex > *:nth-child(3),#rstWrap .flex > *:nth-child(4){ grid-row:2; }
  #rstWrap .flex > *:nth-child(5),#rstWrap .flex > *:nth-child(6),
  #rstWrap .flex > *:nth-child(7),#rstWrap .flex > *:nth-child(8){ grid-row:4; }

  #rstWrap .rst-i:nth-child(4n+1),#rstWrap .flex > *:nth-child(4n+1){ grid-column:1; }
  #rstWrap .rst-i:nth-child(4n+2),#rstWrap .flex > *:nth-child(4n+2){ grid-column:2; }
  #rstWrap .rst-i:nth-child(4n+3),#rstWrap .flex > *:nth-child(4n+3){ grid-column:3; }
  #rstWrap .rst-i:nth-child(4n+4),#rstWrap .flex > *:nth-child(4n+4){ grid-column:4; }

  /* the tab row's own bottom border would now cut through the middle of the grid */
  #rstWrap > .overflow-x-auto{ border-bottom:0 !important; }
  #rstWrap .rst-i{ margin-bottom:2px; }
}
@media (min-width:1101px){ #rstWrap{ display:block; } }