/* 2026-08-27 v1.4
 * - Corrected the image-column clip path to a straight 20px inset
 * 2026-08-27 v1.3
 * - Reserved square space for lazy-loaded images in multi-image square blocks
 * 2026-08-27 v1.2
 * - Rounded image and video columns with a 20px clip path
 * 2026-08-27 v1.1
 * - Kept multi-image desktop columns scrollable instead of clipping them to one viewport
 * 2026-08-24 v1.0
 * - Limited RO Blocks images to the available viewport height
 * - Applied cover cropping only to primary photos and image grids
 */

.ro-blocks {
	--ro-block-image-max-height: calc(100vh - 160px);
}

.ro-blocks [ro-block-id] img,
.ro-blocks [ro-block-id] .block-inner-image-column-wrapper {
	max-height: var(--ro-block-image-max-height);
}

.ro-blocks [ro-block-id] .block-inner-image-column-wrapper {
	-webkit-clip-path: inset(20px);
	clip-path: inset(20px);
}

.ro-blocks [ro-block-id] .block-inner-image-column-wrapper:has(> img + img) {
	max-height: none;
}

.ro-blocks [ro-block-id] .square.block-inner-image-column-wrapper:has(> img + img) > img {
	aspect-ratio: 1 / 1;
}

.ro-blocks [ro-block-id] > div > img:first-child {
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

.ro-blocks [ro-block-id] .block-inner-image-column-wrapper > img {
	max-height: 100%;
	object-fit: cover;
	object-position: center;
}

@media only screen and (max-width: 720px) {
	.ro-blocks {
		--ro-block-image-max-height: calc(100vh - 80px);
	}
}