/* Match the existing single-photo crop and spacing after wrapping the image. */
.post-body .about-photo-tilt {
  display: block;
  width: min(960px, calc(100% - 2rem));
  margin: 1.5rem auto;
  overflow-anchor: none;
}

.post-body .about-photo-surface {
  display: block;
  position: relative;
  border-radius: 5px;
}

.stream-container .post .post-body-wrapper .post-body .about-photo-surface > img.progressive-image {
  width: 100%;
  max-width: 100%;
  height: 520px;
  margin: 0;
  object-fit: cover;
}

@media screen and (max-width: 600px) {
  .post-body .about-photo-tilt { width: 100%; }
  .stream-container .post .post-body-wrapper .post-body .about-photo-surface > img.progressive-image { height: 320px; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .post-body .about-photo-surface {
    transform: perspective(1200px) rotateX(var(--about-rotate-x, 0deg)) rotateY(var(--about-rotate-y, 0deg));
    transition: transform 180ms ease-out;
  }

  .post-body .about-photo-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse at var(--about-shine-x, 50%) var(--about-shine-y, 50%), rgba(255, 255, 255, .16), transparent 65%);
    opacity: 0;
    transition: opacity 180ms ease-out;
  }

  .post-body .about-photo-surface.is-active::after { opacity: 1; }
}