.slider-wrapper {
    position: relative;
    width: 100%;
	max-height:50vh;
    overflow: hidden;
}
	.slider-viewport {
		overflow: hidden;
		width: 100%;
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0%,
			black 30%,
			black 70%,
			transparent 100%
			);

		mask-image: linear-gradient(
			to right,
			transparent 0%,
			black 30%,
			black 70%,
			transparent 100%
			);
	}
		.slider-track {
			display: flex;
			gap:1vw;
			transition: transform 0.5s ease-in-out;
		}
			.slide {
				flex: 0 0 30%;
				padding: 3vw;
				display:flex;
				flex-direction:column;
				justify-content: center; align-items: center;
				cursor:pointer;
				background-color:lightgreen;
				color: inherit; text-decoration: none;
			}

				.slide img {
					width: 100%;
					max-height:24vh;
					object-fit: contain;
					display: block;
				}
				.slide div {
					font-size:clamp(14px, 1.3vw, 24px);
				}
		
	
	.slider-btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(77,77,77,0.7);
		color: white;
		border: none;
		padding: 3vw 1vw;
		cursor: pointer;
		font-size:2rem;
		z-index: 10;
	}

	.slider-btn.left { left: 1.7vw; }
	.slider-btn.right { right: 1.7vw; }