.mosaic-gallery .swiper-slide {
	overflow: hidden;
}

.brick-slide {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	margin: 0 auto;

	/* CSS Custom Properties for responsive scaling */
	--gap-size: 0.4vw;
	/* Responsive gap size */
	--min-gap: 5px;
	/* Minimum gap size */
	--max-gap: 15px;
	/* Maximum gap size */

	/* Clamp gap size between min and max values */
	--responsive-gap: clamp(var(--min-gap), var(--gap-size), var(--max-gap));
}

/* Each row is a flex container with responsive gaps */
.brick-row {
	display: flex;
	gap: var(--responsive-gap);
}

/* Top row: 4 items taking up full width with gaps */
.brick-row-top {
	width: 100%;
}

.brick-row-top .brick-item {
	flex: 1;
	/* Equal distribution of available space */
	aspect-ratio: 1;
	/* Maintains square aspect ratio */
	min-height: 200px;
	/* Minimum height for small screens */
	max-height: 400px;
	/* Maximum height for large screens */
	overflow: hidden;
}

/* Bottom row: 5 items, needs to be wider than top row */
.brick-row-bottom {
	width: calc(100% * 5 / 4);
	/* 25% wider than top row to fit 5 vs 4 items */
	margin-top: var(--responsive-gap);
	/* Shift left by half of one image width plus half gap */
	margin-left: calc(-1 * (100% / 4 / 2 + var(--responsive-gap) / 2));
}

.brick-row-bottom .brick-item {
	flex: 1;
	/* Equal distribution of available space */
	aspect-ratio: 1;
	/* Maintains square aspect ratio */
	min-height: 200px;
	/* Minimum height for small screens */
	max-height: 400px;
	/* Maximum height for large screens */
	overflow: hidden;
}

/* Images fill their container */
.brick-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Full-width alignment specific styles */
.alignfull .brick-slide {
	--gap-size: 0.5vw;
	/* Slightly larger gaps for full-width */
	--max-gap: 20px;
	/* Higher maximum gap for full-width */
}

.alignfull .brick-row-top .brick-item,
.alignfull .brick-row-bottom .brick-item {
	max-height: 500px;
	/* Allow larger images in full-width mode */
}

/* Wide alignment styles */
.alignwide .brick-slide {
	--gap-size: 0.45vw;
	--max-gap: 18px;
}

.alignwide .brick-row-top .brick-item,
.alignwide .brick-row-bottom .brick-item {
	max-height: 450px;
}

/* Responsive breakpoints for better control */
@media (max-width: 768px) {
	.brick-slide {
		--gap-size: 0.8vw;
		--min-gap: 3px;
		--max-gap: 8px;
	}

	.brick-row-top .brick-item,
	.brick-row-bottom .brick-item {
		min-height: 150px;
		max-height: 250px;
	}
}

@media (min-width: 1400px) {
	.brick-slide {
		--gap-size: 0.3vw;
		--min-gap: 8px;
		--max-gap: 25px;
	}

	.alignfull .brick-row-top .brick-item,
	.alignfull .brick-row-bottom .brick-item {
		max-height: 600px;
	}
}


/* =====[NAVIGATION & PAGINATION]===== */
.mosaic-gallery.swiper .swiper-button-next,
.mosaic-gallery.swiper .swiper-button-prev {
   padding: 10px 10px;
   border-radius: 4px;
   width: 42px;
   height: 42px;
   background-color: #FFFFFF;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 24px;
}
.mosaic-gallery.swiper .swiper-button-next {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-chevron-right'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 6l6 6l-6 6' /%3E%3C/svg%3E");
}
.mosaic-gallery.swiper .swiper-button-prev {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-chevron-left'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15 6l-6 6l6 6' /%3E%3C/svg%3E");
}
.mosaic-gallery.swiper .swiper-button-next::after,
.mosaic-gallery.swiper .swiper-button-prev::after {
   display: none;
}
.mosaic-gallery.swiper .swiper-button-next:hover,
.mosaic-gallery.swiper .swiper-button-prev:hover {
   background-color: var(--wp--preset--color--cream);
}
.mosaic-gallery.swiper .swiper-pagination {
   display: none;
}
.mosaic-gallery.swiper img {
   object-fit: cover;
   object-position: center;
}