/* Phones and small tablets. t1 was cut from a desktop design whose mobile
   site was a different stylesheet; its fixed 250px columns, 166px cards and
   row-wise flex containers push every page wider than a phone. These rules
   stack the columns and keep everything inside the viewport. */
@media (max-width: 800px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, iframe, table { max-width: 100%; }
  img { height: auto; }
  h1, h2, h3, .RecSection-title, .WorkMeta-title { white-space: normal; overflow-wrap: anywhere; }

  .Content { display: block; max-width: 100%; padding: 0 12px; box-sizing: border-box; }
  .DesktopHeader { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: .5rem 12px; }
  .SearchContainer, .Search, .Search form { width: 100%; }
  .Search-input { width: 100%; box-sizing: border-box; }

  .HomeButtons { display: flex; flex-wrap: wrap; }
  .HomeButtons-button { width: 100%; margin: 4px 0; box-sizing: border-box; }

  .WorkContainer { display: block; }
  .WorkCoverSidebar, .WorkPriceSidebar { width: 100%; min-width: 0; max-width: 100%; flex: none; margin: 0 0 1rem; }
  .WorkCover img { display: block; max-width: 60%; margin: 0 auto; }
  .WorkInterface { max-width: 100%; margin: 0; }
  .WorkSelector-sidebar ul li { width: auto !important; }
  .WorkMeta-overview, .WorkMeta-details, .WorkSelector-container { overflow-wrap: anywhere; }
  .WorkSelector-container table { width: 100%; }
  .book-preview iframe { height: 480px; }

  .Search-main-container { display: block; }
  .Search-filter-container { max-width: 100%; min-width: 0; }
  .SearchResultGridItem { width: calc(50% - 8px); vertical-align: top; }

  .Footer, .Footer-links, .Footer-linksSection { display: block; }
  .WorkBreadcrumbs { max-width: 100%; overflow-wrap: anywhere; padding: 0 12px; }
}