#gallery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 50px 0;
}

    @media (max-width: 2000px) {
      #gallery {
        gap: 0px;
     }
  }

#gallery h2 {
     margin-top: 0;
    font-weight: 600;
    font-size: clamp(26px, 3vw, 28px);
    margin-bottom: 0;
    padding: 30px;
    color: rgb(68, 58, 44);
    font-family: "Fredoka", sans-serif;
}

.gallery-wrapper {
     position: relative; 
     width: 700px; 
     height: auto; 
     overflow: hidden;
     touch-action: pan-y;
     aspect-ratio: 16 / 9;
    }

    @media (max-width: 768px) {
      .gallery-wrapper {
      width: 100%;
      height: auto;
     }
   }

.gallery-wrapper img {
     position: absolute;
      width: 100%; 
      height: 100%; 
      object-fit: cover; 
      top: 0; 
      left: 0; 
      opacity: 0; 
      transition: opacity 1s ease; 
      border-radius: 10px;

        -webkit-mask-image: radial-gradient(
    circle,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,0) 100%
  );

  mask-image: radial-gradient(
    circle,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,0) 100%
  );
  }

.gallery-wrapper img.active {
     opacity: 1; 
  }

     @media (max-width: 768px) {
      .gallery-wrapper img {
       border-radius: 0; 
     }
   }

.arrow-gallery {
     position: absolute; 
     top: 50%; 
     transform: translateY(-50%); 
     background: none; 
     color: black;
     border: none; 
     padding: 10px; 
     cursor: pointer; 
     border-radius: 50%; 
     font-size: 18px; 
     user-select: none; 
    }

.arrow-gallery.left {
     left: 30px; 
    }

.arrow-gallery.right {
     right: 10px; 
    }

.dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  direction: rtl;
}

.dots span {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.dots span.active {
  background: rgba(255, 255, 255, 1);
}