/**
 * Masonry-like columns for JetEngine listing grids.
 *
 * Apply the `sbtc-masonry-grid` class to the JetEngine Listing Grid widget
 * (Advanced > CSS Classes) so this stylesheet can safely target only the
 * galleries that should collapse vertical gaps between images.
 */
.sbtc-masonry-grid .jet-listing-grid__items {
	display: block;
	column-gap: clamp(8px, 1.5vw, 16px);
	column-count: var(--sbtc-masonry-columns, 4);
}

.sbtc-masonry-grid .jet-listing-grid__item {
	display: block;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 clamp(8px, 1.5vw, 16px);
	padding: 0 !important;
	break-inside: avoid;
}

.sbtc-masonry-grid .jet-listing-grid__item img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	.sbtc-masonry-grid .jet-listing-grid__items {
		column-count: var(--sbtc-masonry-columns-tablet, 3);
	}
}

@media (max-width: 767px) {
	.sbtc-masonry-grid .jet-listing-grid__items {
		column-count: var(--sbtc-masonry-columns-mobile, 2);
	}
}

@media (max-width: 375px) {
	.sbtc-masonry-grid .jet-listing-grid__items {
		column-count: 1;
	}
}