.fg-gallery {
	--fg-columns: 4;
	--fg-gap: 10px;
	box-sizing: border-box;
}

.fg-gallery * {
	box-sizing: border-box;
}

.fg-layout-grid .fg-items {
	display: grid;
	grid-template-columns: repeat(var(--fg-columns), 1fr);
	gap: var(--fg-gap);
}

.fg-layout-masonry .fg-items {
	column-count: var(--fg-columns);
	column-gap: var(--fg-gap);
}

/* Each infinite-scroll batch is appended as its own .fg-items block (own
   column context) so new batches never reflow/rebalance earlier ones. */
.fg-gallery .fg-items + .fg-items {
	margin-top: var(--fg-gap);
}

.fg-layout-masonry .fg-item {
	break-inside: avoid;
	margin: 0 0 var(--fg-gap);
	display: block;
}

.fg-item {
	position: relative;
	margin: 0;
	content-visibility: auto;
	contain-intrinsic-size: 400px 300px;
}

.fg-layout-grid .fg-item {
	height: 100%;
	overflow: hidden;
}

.fg-picture-img {
	display: block;
	width: 100%;
	height: auto;
}

.fg-layout-grid .fg-item .fg-picture-img,
.fg-layout-grid .fg-item picture {
	height: 100%;
}

.fg-layout-grid .fg-item .fg-picture-img {
	object-fit: cover;
}

.fg-lightbox-link {
	display: block;
	cursor: zoom-in;
	line-height: 0;
}

.fg-empty {
	opacity: 0.7;
}

.fg-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--fg-gap);
}

.fg-pagination .fg-page-link,
.fg-pagination .fg-page-current {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid currentColor;
	border-radius: 3px;
	text-decoration: none;
}

.fg-pagination .fg-page-current {
	font-weight: bold;
	opacity: 0.6;
}

.fg-sentinel {
	height: 1px;
}

@media (max-width: 1024px) {
	.fg-gallery {
		--fg-columns: 3 !important;
	}
}

@media (max-width: 768px) {
	.fg-gallery {
		--fg-columns: 2 !important;
	}
}

@media (max-width: 480px) {
	.fg-gallery {
		--fg-columns: 1 !important;
	}
}