body{
  background-color: #f5f5f7;
}

  .gallery {
    margin: 25px auto;
    color: #000;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 10px;

  }
  
  .gallery-item {
    flex: 1 1 calc(33% - 20px);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
    border-radius: 10px;
  }
  
  .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    opacity: 0.6;
  }
  
  .gallery-item:hover {
    transform: scale(1.02);
    color:#c0a56f;
  }
  
  .gallery-item:hover img {
    opacity: 1;
  }
  
  
  @media (max-width: 768px) {
    .gallery {
      margin-left: 50px;
    }
    .gallery-item {
      flex: 1 1 calc(50% - 20px);
    }
  
  }
  
  @media (max-width: 480px) {
    .gallery-item {
      flex: 1 1 100%;
    }
  }