/* Every photo uses the same 8px / 2px-pixel offset as the game frame.
   The crop stays inside the image; its offset remains outside, with space reserved. */
.sj-photo-frame {
	display: block;
	width: 100%;
	max-width: 100%;
	vertical-align: top;
}
.sj-photo-crop { display: block; width: 100%; height: 100%; overflow: hidden; }
.sj-photo-crop > img { display: block; max-width: 100%; }
.elementor-widget-image .sj-photo-frame {
	max-width: calc(100% - var(--sj-pixel-shadow-size));
	margin-inline: auto;
	margin-bottom: var(--sj-pixel-shadow-size);
}
.sj-about-wide-photo .sj-photo-frame { width: min(1080px, calc(100% - var(--sj-pixel-shadow-size))); }
.sj-about-collage .sj-photo-frame { width: min(773px, calc(100% - var(--sj-pixel-shadow-size))); }

/* Keep the supplied testimonial crops while allowing their outer offset to show. */
.sj-home-page .sj-home-section .sj-home-quote-person > .sj-home-quote-avatar { overflow: visible; border: 0; }
.sj-home-page .sj-home-quote-avatar .sj-photo-frame { width: 100%; height: 100%; max-width: none; margin: 0; }
.sj-home-quote-avatar .sj-photo-crop { border: 1px solid var(--sj-home-line); }

.sj-latest-image { padding-right: var(--sj-pixel-shadow-size); padding-bottom: var(--sj-pixel-shadow-size); }
/* Full-width archive images reserve the offset inside their cell, so it meets its rail. */
.sj-post-card-image { padding-right: var(--sj-pixel-shadow-size); padding-bottom: var(--sj-pixel-shadow-size); }
.sj-post-nav-image { overflow: visible; }
.sj-post-nav-image .sj-photo-frame { height: 100%; }
.sj-post-sidebar .wp-block-latest-posts__featured-image .sj-photo-frame { height: 80px; }

/* Inline photographs keep their natural width and leave room beside captions and text. */
.sj-post-content .sj-photo-frame,
.sj-page-body .sj-photo-frame {
	display: inline-block;
	width: auto;
	max-width: calc(100% - var(--sj-pixel-shadow-size));
	margin-bottom: var(--sj-pixel-shadow-size);
}
.sj-post-content .sj-photo-crop > img,
.sj-page-body .sj-photo-crop > img { height: auto; }