#mgp-gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem; /* 👈 Ensures space before pagination */
}


   .keystone-container
    {
        display:block!important;
    }

#mgp-gallery-container > div {
  box-sizing: border-box;
}

/* 2-column layout: 70% + 30% */
#mgp-gallery-container > div:nth-child(5n+1) {
  width: calc(70% - 0.5rem);
}
#mgp-gallery-container > div:nth-child(5n+2) {
  width: calc(30% - 0.5rem);
}

/* 3-column layout: 33.33% x 3 */
#mgp-gallery-container > div:nth-child(5n+3),
#mgp-gallery-container > div:nth-child(5n+4),
#mgp-gallery-container > div:nth-child(5n+5) {
  width: calc(33.3333% - 0.67rem);
}


.mgp-item {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.mgp-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Overlay that matches the image height exactly */
.mgp-overlay {
  position: absolute;
  inset: 0; /* shorthand for top: 0; right: 0; bottom: 0; left: 0; */
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* prevents hover interference */
}

.mgp-item:hover .mgp-overlay {
  opacity: 1;
  pointer-events: auto;
}

.mgp-overlay p {
  color: #fff !important;
  margin: 0;
  padding: 0.5rem;
  text-align: center;
}


.mgp-item:hover .mgp-overlay {
  opacity: 1;
}

/* ✅ Pagination fix */
.mgp-pagination {
  display: block;
  width: 100%;
  clear: both;
  text-align: center;
  margin-top: 2rem;
}

.mgp-pagination .page-numbers,
.mgp-pagination button {
  display: inline-block;
  margin: 0 5px;
  padding: 8px 14px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
  cursor: pointer;
}

.mgp-pagination .current {
  background: #000;
  color: #fff;
  font-weight: bold;
}