.whole_container
  {
  margin: 0 auto;  
  width: calc(240px * 4 + 33px);
  }
  a{
  text-decoration:none;
  }
.grid {
 width: 100%;
  position: relative;
   margin: 0 auto;    
}
.grid, .grid-item { transition: none !important; }
.grid-sizer, .grid-item { width: 240px; }
.grid-wrapper {
width: calc(240px * 4 + 33px);
  margin: 10px auto;
  overflow-x: auto;
}
.grid-item {  position: relative;margin-bottom: 9px;
max-height:320px;
 border-radius: 4px; overflow: hidden; }
.grid-item img {
  width:100%;
  height:100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.05s ease;
}



.grid-item img.loaded { opacity: 1; }
.icon-overlay {
  position: absolute;
  top: 6px;
  right: 4px;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.remix-overlay {
  position: absolute;
  top: 6px;
  left: 4px;
  display: flex;
  padding: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  }
.grid-item.bg-transparent {
  background: transparent;
}

/* show overlay on hover */
.grid-item:hover .icon-overlay, .grid-item:hover .remix-overlay {
  opacity: 1;
}
.icon-btn {
  background: transparent; 
  border: none;  
  }
/* icon sizing + hover grow effect */
.icon-btn img,.icon-btn svg {
  width: 26px;
  height: 26px;
  transition: transform 0.2s ease;
}

.fav-btn .fav-icon path {
  fill: none;
  stroke: #00f900;
  transition: fill 0.18s;
}
.fav-btn.faved .fav-icon path {
  fill: #00f900;   /* Bright green fill for faved */
}

.icon-btn:hover img,.icon-btn:hover svg {
  transform: scale(1.3);
}
.icon-btn:hover {
 cursor:pointer;
}
/* Overlay for title at bottom */
.gif-title-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
   background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.25) 40%,
    rgba(0,0,0,0.29) 70%,
    rgba(0,0,0,0.33) 100%
  );
  color: #fff;
  font-size: 15px;
  padding: 9px 14px 7px 12px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: opacity 0.18s;
}

.grid-item:hover .gif-title-overlay {
  opacity: 1;
}




@media (max-width: 600px) {
 .grid-sizer, .grid-item { width: 177px; 
 max-height:260px;
 }
  .grid-wrapper {
    width: calc(177px * 2 + 11px); 
    margin: 10px auto;
    overflow-x: auto;
  }
  .whole_container
  {
  margin: 0 auto;  
  width: calc(177px * 2 + 11px); 
  }
 .icon-overlay,.gif-title-overlay,.remix-overlay
 {
 display:none;
 }
}