.mosaic-carousel-wrap { position: relative; }

.mosaic-column {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
}

.small-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.big-img img,
.small-row img {
  width: 100%;
  border-radius: 14px;
  display: block;
}

/* ZIG-ZAG */
.layout-top-small { grid-template-rows: auto 1fr; }
.layout-top-big { grid-template-rows: 1fr auto; }
.layout-top-big .big-img { order: -1; }

/* NAV */
.mosaic-prev,
.mosaic-next {
  background: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.mosaic-prev { left: -55px; }
.mosaic-next { right: -55px; }

@media(max-width:768px){
  .mosaic-prev{left:5px}
  .mosaic-next{right:5px}
}




/* ===== REFERENCE STYLE NAVIGATION ===== */

.mosaic-prev,
.mosaic-next {
  width: 36px;
  height: 36px;
  background: #e6e6e6;              /* light grey bg */
  border: 1px solid #bdbdbd;        /* thin border */
  border-radius: 50%;
  color: #333;
  box-shadow: none;
  transition: all 0.3s ease;
}

/* Arrow icon size */
.mosaic-prev::after,
.mosaic-next::after {
  font-size: 14px;
  font-weight: 600;
}

/* Position – reference jaise side me */
.mosaic-prev {
  left: -18px;
}

.mosaic-next {
  right: -18px;
}

/* Hover effect (premium feel) */
.mosaic-prev:hover,
.mosaic-next:hover {
  background: #d9d9d9;
  border-color: #999;
  color: #000;
}

/* Disable blue default swiper focus */
.mosaic-prev:focus,
.mosaic-next:focus {
  outline: none;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .mosaic-prev {
    left: 5px;
  }
  .mosaic-next {
    right: 5px;
  }
}