.gallery {
    width: 70%;
    margin: auto;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .img-c {
    width: calc(33.33% - 10px);
    height: 200px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }
  
  .img-c:hover {
    transform: scale(1.05);
  }
  
  .img-w {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-in-out;
  }
  
  .img-w img {
    display: none;
  }
  
  .img-c.active {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    z-index: 2;
  }
  
  .img-c.postactive {
    position: absolute;
    z-index: 2;
    pointer-events: none;
  }
  
  .img-c.active.positioned {
    left: 0 !important;
    top: 0 !important;
    transition-delay: 50ms;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .gallery {
      width: 90%;
    }
    .img-c {
      width: calc(50% - 10px); /* Dua kolom di tampilan lebih kecil */
    }
  }
  
  @media (max-width: 480px) {
    .img-c {
      width: calc(34% - 10px); /* Satu kolom penuh untuk layar kecil */
    }
  }