.gallery {
	padding: 1rem;
	display: grid;
	grid-template-columns: repeat(6, 30vw);
	grid-template-rows: 1fr;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	overflow-x: scroll;
	height: 60vh;
	scroll-padding: 1rem;

}



li {
	scroll-snap-align: center;
	display: inline-block;
	border-radius: 0px;
	font-size: 0;
}


/* Works on Firefox */
* {
  scrollbar-width: thin ;
  scrollbar-color:#E5DCD3 white;
 
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  scrollbar-color: #C6B4A3;
  
}

*::-webkit-scrollbar-track {
  background: #C6B4A3;
}


/*------------------------responsive*/
@media screen and (max-width:1000px) {
.gallery {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(6, 30vw); 
    grid-template-rows: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    overflow-x: scroll;
    height: 60vh;
    scroll-padding: 1rem;
    scroll-snap-type: x mandatory;
}

li {
    scroll-snap-align: center;
    display: inline-block;
    border-radius: 0;
    font-size: 0;
}

/* Works on Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #E5DCD3 white;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    scrollbar-color: #C6B4A3;
}

*::-webkit-scrollbar-track {
    background: #C6B4A3;
}


/* Mobile Phones (max-width: 768px) */
@media (max-width: 700px) {
    .gallery {
        grid-template-columns: repeat(6, 80vw);
        height: 60vh; 
    }
}

}