/* Keep each recent pack and its full caption readable when the view narrows. */
.recent-heading{flex-wrap:wrap}
.recent-row,.recent-row>div{min-inline-size:0}
.recent-row h4,.recent-row p,.recent-row h4 button{
  max-inline-size:100%;
  overflow-wrap:anywhere;
  white-space:normal;
}
.recent-row h4 button{display:block}
.recent-photo{max-inline-size:100%}

/* A pinch keeps the desktop layout viewport; only the visible area shrinks.
   Keep the photo anchored, and place its caption below it within that area. */
html[data-visual-zoom] .recent-row{
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  align-items:start;
  gap:12px;
}
html[data-visual-zoom] .recent-row>div{
  inline-size:min(100%,calc(var(--visual-viewport-width) - 24px));
}
html[data-visual-zoom] .recent-photo{
  max-inline-size:min(100%,calc(var(--visual-viewport-width) - 24px));
}

@media(max-width:760px){
  .recent-list{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:520px){
  .recent-row{
    grid-template-columns:minmax(0,1fr);
    justify-items:start;
    align-content:start;
    gap:12px;
  }
  .recent-photo{width:96px;height:130px}
  .recent-row h4{font-size:20px;line-height:1.5}
  .panorama-hero .primary,.load-more-row .primary{min-width:0;max-inline-size:100%}
}