.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;
  }
}