/* Preserve the desktop presentation; adapt only below its original width. */
body.fullscreen #viewer .slide .image {
  background-size: contain;
  background-position: center !important;
}
@media screen and (max-width: 1015px) {
  body.memorial-text { margin: 0; }
  .memorial-text .content {
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .memorial-text .content img { max-width: 100%; height: auto; }
  .memorial-text .content table { width: 100%; max-width: 100%; }
  .memorial-text .content table[background] {
    height: 320px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .memorial-text .content table[background] td { padding: 12px; }
  .memorial-text .content table[background] h1 { font-size: 28px; }
  .memorial-text .content table:not([background]),
  .memorial-text .content table:not([background]) > tbody,
  .memorial-text .content table:not([background]) > tbody > tr,
  .memorial-text .content table:not([background]) > tbody > tr > td {
    display: block;
    box-sizing: border-box;
    width: 100%;
  }
  .memorial-text .content p { margin-left: 0 !important; margin-right: 0 !important; }
  .memorial-text .content ul { padding-left: 24px; }
  .memorial-text .content a { overflow-wrap: anywhere; }
}
@media screen and (max-width: 767px) {
  body#page-top iframe {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-left: auto;
    margin-right: auto;
  }
  body#page-top .btn { white-space: normal; }
}
@media screen and (max-width: 980px) {
  /* Show the whole sculpture on a narrow screen instead of cropping it. */
  #viewer .slide .image { background-size: contain; background-position: center !important; }
  #viewer .inner .toggle,
  #viewer .inner .nav-next,
  #viewer .inner .nav-previous { min-width: 44px; min-height: 44px; }
}
