.smg-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 230px)); /* 🔥 FIX */
  gap:20px;
  justify-content:start; /* center align */
}

/* CARD */
.smg-item{
  width:100%;
}

/* BOX (same control like cg-card) */
.smg-box{
  width:100%;
  height:120px;   /* 🔥 FIXED HEIGHT (like cg-card concept) */
  position:relative;
  overflow:hidden;
  border-radius:20px;
  background:#eee;
}

/* IMAGE / VIDEO */
.smg-box img,
.smg-box video{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* PLAY ICON */
.play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#0008;
  color:#fff;
  padding:10px;
  border-radius:50%;
}

/* PDF */
.pdf{
  background:#e53935;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}

/* MAP */
.map{
  background:#7cba38;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* TITLE */
.smg-item p{
  text-align:center;
  margin-top:8px;
  font-weight:600;
}
.smg-box.map img{
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
}

#smgModal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  z-index:99999; /* 🔥 FIX */
  justify-content:center;
  align-items:center;
}

.smg-modal-content{
  position:relative;
  width:80%;
  max-width:800px;
}

#smgVid{
  width:100%;
  height:auto;
  background:#000;
}

/* close button */
.smg-close{
  position:absolute;
  top:10px;        /* 🔥 अंदर रखो */
  right:10px;
  color:#fff;
  font-size:26px;
  background:rgba(0,0,0,0.6);
  width:35px;
  height:35px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  cursor:pointer;
  z-index:100000;  /* 🔥 हमेशा ऊपर */
}