* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.container {
	position: relative;
	padding: 15px;
	max-width: 640px;
	margin: 0 auto;
}

.gallery {
	display: flex;
	flex-flow: row nowrap;
	gap: 15px;
}

.gallery-wrapper {
	overflow-x: auto;
}

.arrow-left,
.arrow-right {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	font-size: 25px;
	line-height: 40px;
	text-align: center;
	color: #fff;
	cursor: pointer;
	background: linear-gradient(to left, transparent %0, black 200%);
	transition: all 600ms;
	opacity: 0.1;
}

.arrow-right {
		position: absolute;
			transition: all 600ms;
	top: 0;
	left: auto;
	right: 0;
	font-size: 25px;
	cursor: pointer;
	background: linear-gradient(to right, transparent %0, black 200%);
}

.arrow-left:hover,
.arrow-right:hover {
	opacity: 1;
}