/* V42 — phone-only image layout: smaller, complete images with breathing room. */
@media (max-width: 700px) {
  /* Keep the degree label directly beneath the portrait, never over its edge. */
  .photo-browser.single-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(78vw, 292px);
    height: auto !important;
    margin: 34px auto 0;
    transform: none !important;
    perspective: none;
    overflow: visible;
  }

  .single-photo .main-photo {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0;
    transform: none !important;
  }

  .single-photo .main-photo img {
    position: static;
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center;
    transform: none !important;
  }

  .photo-browser .browse-note { display: none; }

  .photo-browser .current-badge {
    position: static !important;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    margin: 12px 0 0 !important;
    transform: none !important;
    white-space: normal;
  }

  /* Preserve every project image's own proportions instead of cropping it. */
  .work-grid {
    justify-items: center;
    gap: 24px;
  }

  body .work-grid .work-item {
    grid-column: 1 / -1 !important;
    width: min(100%, 264px) !important;
    height: auto !important;
    margin-inline: auto;
  }

  body .work-grid .work-item img,
  body .work-grid .work-item:hover img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center;
    transform: none !important;
  }

  /* The personal gallery follows the same uncut, smaller presentation. */
  .life-gallery {
    grid-template-columns: 1fr !important;
    justify-items: center;
    gap: 18px;
  }

  .life-shot {
    width: min(100%, 264px);
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: visible;
  }

  .life-shot img {
    position: static !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}