/* Shared touch and overflow safeguards for the gallery page. */
.gallery-page {
  overflow-x: hidden;
}

.gallery-page .card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.gallery-page .card-img {
  flex: 0 0 auto;
  width: 100%;
}

.gallery-page .card > div:last-child {
  min-width: 0;
  flex: 1 1 auto;
}

.gallery-page .card img,
.gallery-page #modal-body img {
  max-width: 100%;
}

.gallery-page #quiz-content,
.gallery-page #quiz-result,
.gallery-page #modal-body {
  overflow-wrap: anywhere;
}

.gallery-page #modal-body {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .gallery-page header .max-w-5xl {
    padding-right: .75rem;
    padding-left: .75rem;
  }

  .gallery-page header .max-w-5xl > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  .gallery-page header h1,
  .gallery-page header p {
    max-width: 10rem;
  }

  .gallery-page header a[href="index.html"],
  .gallery-page header button {
    min-width: 44px;
    min-height: 44px;
  }

  .gallery-page header a[href="index.html"] {
    padding-right: .7rem;
    padding-left: .7rem;
  }

  .gallery-page #quiz-prev,
  .gallery-page #quiz-next {
    min-height: 44px;
  }

  .gallery-page #grid-normal,
  .gallery-page #grid-special {
    gap: .625rem;
  }

  .gallery-page #grid-normal .card,
  .gallery-page #grid-special .card {
    border-radius: .75rem;
  }

  .gallery-page #grid-normal .card > div:last-child,
  .gallery-page #grid-special .card > div:last-child {
    padding: .625rem;
  }

  .gallery-page #grid-normal .card p,
  .gallery-page #grid-special .card p {
    min-height: 2.2rem;
  }

  .gallery-page #modal-content {
    top: .5rem;
    border-radius: 1.25rem 1.25rem 0 0;
  }

  .gallery-page #modal-close {
    width: 44px;
    height: 44px;
  }

  .gallery-page #modal-share,
  .gallery-page #modal-copy {
    min-height: 48px;
  }
}

@media (max-width: 360px) {
  .gallery-page header h1 {
    max-width: 7.5rem;
  }

  .gallery-page header p {
    max-width: 7.5rem;
  }

  .gallery-page .card > div:last-child {
    padding-right: .55rem;
    padding-left: .55rem;
  }

  .gallery-page #quiz-content h3 {
    font-size: 1rem;
  }
}