.gallery3 {
	overflow-x: auto;
	margin: 5% 2em;
	margin-right: 2em;
	display: flex;
	gap: 1em;
	scroll-behavior:smooth;
	anchor-name: --gallery;
	scroll-snap-type: x mandatory;
	scroll-marker-group: after;
}

.gallery3::scroll-marker-group{
	display: flex;
	justify-content: center;
	gap: .5em;
}

.gallery3card::scroll-marker{
	content: '';
	height: .5em;
	width: 1.5em;
	background-color: purple;
	border-radius: 0.5em;
}

.gallery3card::scroll-marker:target-current {
	background-color: gray;
}

.gallery3::-webkit-scrollbar {
	display: none;
}

.gallery3::scroll-button(right), .gallery3::scroll-button(left) {
	content: '>';
	border: none;
	background-color: purple;
	color:white;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	padding-bottom: .1em;
	cursor: pointer;
	position:fixed;
	position-anchor: --gallery;
	position-area:right center;
	translate:50%
}

.gallery3::scroll-button(left) {

	content: "<";
	position-area:left center;
	translate: 50%;
}

.galery3::scroll-button(right):disabled, .gallery3::scroll-button(left):disabled {
	opacity: 0.5;
	cursor: auto;
}

.gallery3card {
	z-index: 1;
	scroll-snap-align:start;
	flex: 0 0 20em;
	max-height: 12em;
	/* aspect-ratio: 5 / 3; */
	/* background-color: gray; */
	padding: .1em;
	border-radius:.5em;
	text-align: center;
	align-content: center;
}

@media(max-width: 500px){
	.gallery3card {
		flex: 0 0 100%;
	}
}