/* SOT homepage: original full photo on desktop, taller lower-half crop on phones.
   Load after assets/style.css. The homepage picture element selects the source. */
.panorama.panorama-cropped img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center bottom;
}

/* Tablets and phones in landscape: give the photograph a little more height. */
@media (min-width: 761px) and (max-width: 1024px) {
  .panorama.panorama-cropped img {
    height: clamp(220px, 28vw, 300px);
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* Phones: crop the sides, keeping the central skyline and river in view.
   58vw gives an approximately 249px-tall photo on a 430px-wide iPhone screen. */
@media (max-width: 760px) {
  .panorama.panorama-cropped img {
    height: clamp(210px, 58vw, 300px);
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* Desktop: preserve the original photograph's full proportions and content.
   Scoped to the new picture element so older homepage HTML remains compatible. */
.panorama.panorama-cropped picture {
  display: block;
}
@media (min-width: 1025px) {
  .panorama.panorama-cropped .panorama-desktop-original > img {
    height: auto;
    aspect-ratio: 1920 / 1079;
    object-fit: contain;
    object-position: center;
  }
}