@import url('https://fonts.googleapis.com/css?family=Poppins');

/* MAIN CONTAINER */
.uxg-container-all {
  width: 100%;
  margin: 20px auto;
  overflow: hidden;
}

/* EACH ITEM (3 PER ROW) */
.uxg-container {
  width: calc(33.33% - 6px);
  margin: 3px;
  float: left;
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
  border-radius: 10px;
}

/* IMAGE FIX (NO CROP 🔥) */
.uxg-container img {
  width: 100%;
  height: 220px;
  object-fit: contain;      /* ✅ show full image */
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  transition: 0.3s;
}

/* HOVER EFFECT */
.uxg-container:hover img {
  transform: scale(1.1);
  filter: grayscale(40%);
  opacity: 0.8;
}

/* TITLE */
.uxg-title {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 1.4em;
  text-shadow: 1px 5px 10px black;
  display: none;
  color: #fff;
  text-align: center;
}

/* DESCRIPTION */
.uxg-text {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  text-align: center;
  font-size: 0.95em;
  text-shadow: 1px 5px 10px black;
  display: none;
  color: #fff;
}

/* SHOW TEXT ON HOVER */
.uxg-container:hover .uxg-title,
.uxg-container:hover .uxg-text {
  display: block;
}

/* OPTIONAL TITLE */
#gallery-title {
  text-align: center;
  font-weight: bold;
}

/* RESPONSIVE */
@media only screen and (max-width: 900px) {
  .uxg-container {
    width: calc(50% - 6px);
  }
}

@media only screen and (max-width: 400px) {
  .uxg-container {
    width: 100%;
  }
}


/* --- MINIMIZED GALLERY (992px & DOWN) --- */
@media only screen and (max-width: 992px) {
  /* 1. Reduce section and container padding */
  section#gallery.block {
    padding: 30px 0 !important;
  }

  .uxg-container-all {
    margin: 10px auto !important;
    padding: 0 5px !important;
  }

  /* 2. Create a tighter 2-column grid */
  .uxg-container {
    width: calc(50% - 4px) !important; /* Two items per row */
    margin: 2px !important;            /* Thinner gaps */
    border-radius: 6px !important;
  }

  /* 3. Reduce image height for a compact look */
  .uxg-container img {
    height: 140px !important; /* Reduced from 220px to save vertical space */
    padding: 5px !important;   /* Thinner white border */
  }

  /* 4. Optimize text overlays for small screens */
  .uxg-title {
    font-size: 0.9em !important;
    top: 40% !important;
    width: 90% !important;
  }

  .uxg-text {
    font-size: 0.7em !important;
    top: 75% !important;
    max-width: 95% !important;
    line-height: 1.2 !important;
  }

  /* 5. Pull the "View Gallery" button closer */
  .edutech-button-center-wrapper {
    margin-top: 15px !important;
  }
}

/* Extra small screens (Phones) */
@media only screen and (max-width: 480px) {
  .uxg-container img {
    height: 120px !important; /* Even smaller for very narrow screens */
  }
  
  /* Optional: Hide descriptions on very small screens to keep it clean */
  .uxg-text {
    display: none !important; 
  }
}