/* ===== GALLERY ===== */
.pm-popup1 {
  width: 96%;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.pm-popup2 {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.pm-popup2:hover {
  transform: scale(1.05);
}

/* ===== POPUP OVERLAY ===== */
.pm-popup3 {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* ===== POPUP IMAGE ===== */
.pm-popup4 {
  max-width: 50%;
 
  border-radius: 14px;
  animation: pmZoom 0.35s ease;
}

/* ===== BACK BUTTON ===== */
.pm-popup5 {
  position: absolute;
  top: 18px;
  left: 20px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  background: rgba(255,255,255,0.12);
  padding: 8px 14px;
  border-radius: 30px;
  user-select: none;
}

/* ===== ANIMATION ===== */
@keyframes pmZoom {
  from { transform: scale(0.75); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ================= MEDIA QUERIES ================= */

/* Extra Large Screens */
@media (min-width: 1400px) {
  .pm-popup2 { height: 320px; }
}

/* Laptop */
@media (max-width: 1200px) {
  .pm-popup1 { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet */
@media (max-width: 992px) {
  .pm-popup1 { grid-template-columns: repeat(2, 1fr); }
  .pm-popup2 { height: 240px; }
}

/* Large Mobile */
@media (max-width: 768px) {
  .pm-popup5 { font-size: 18px; }
}

/* Small Mobile */
@media (max-width: 576px) {
  .pm-popup1 { width: 95%; }
  .pm-popup2 { height: 210px; }
  .pm-popup4 {
  max-width: 90%;
  
  border-radius: 14px;
  animation: pmZoom 0.35s ease;
}
}

/* Extra Small Devices */
@media (max-width: 420px) {
  .pm-popup1 { grid-template-columns: 1fr; }
  .pm-popup2 { height: 220px; }
  .pm-popup4 {
  max-width: 90%;
  
  border-radius: 14px;
  animation: pmZoom 0.35s ease;
}
}