/* Reuse the Friends navigation; retain the exported desktop gallery above 1400px. */
.photo-page .photo-toolbar { display: contents; }
.photo-page .photo-chevron { display: block; width: 40px; height: 40px; }

@media (max-width: 1400px) {
  .photo-page .photo-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 12px 12px 16px;
    order: 1;
  }
  .photo-page [data-pencil-name="Gallery"] {
    position: static !important;
    min-width: 0;
    font-size: 24px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .photo-page .photo-dropdown {
    position: static !important;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px !important;
    height: 44px !important;
  }
  .photo-page .photo-chevron { width: var(--icon-size); height: var(--icon-size); }
  .photo-page .photo-gallery {
    position: static !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: auto !important;
    height: auto !important;
    margin-inline: 12px;
    overflow: visible !important;
    order: 2;
  }
  .photo-page .photo-gallery > div { display: contents !important; }
  .photo-page .photo-gallery > div > div {
    min-width: 0;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
  }
}

@media (max-width: 600px) {
  .photo-page [data-pencil-name="Gallery"] { font-size: clamp(1.25rem, 5.64vw, 1.5rem) !important; }
}

@media (min-width: 601px) and (max-width: 1400px) {
  .photo-page :is(.photo-toolbar, .photo-gallery) { margin-inline: 24px; }
  .photo-page .photo-gallery { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}