.slide {
	width: 100%;
	aspect-ratio: 1;
	position: relative;
}

.slide .item {
	z-index: 0;
	transition-duration: 314ms;
	opacity: 0;
}

.slide .item.active {
	z-index: 99999997;
	transition-duration: 314ms;
	opacity: 1;
}

.slide .item:first-child {
	position: relative;
}

.slide .item:not(:first-child) {
	top: 0;
	left: 0;
	position: absolute;
	height: 100%;
}

.slide .item img {
	object-fit: contain;
}



.slide:hover .button {
	opacity: 1;
	transition-duration: 450ms;
	z-index: 99999998;
}

.slide .button {
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	width: 40px;
	height: 40px;
	cursor:pointer;
	opacity: 0;
	transition-duration: 200ms;
}

.slide .button::after {
	content: " ";
	display: block;
	position: absolute;
	width: 40px;
	height: 40px;
	background-color: #ffffff9a;
	border-style: solid;
	border-width: .5px;
	border-radius: 100%;
	z-index: 0;
}

.slide .button:is(.left, .right)::before {
	content: " ";
	display: block;
	position: absolute;
	width: 40px;
	height: 40px;
	z-index: 2;
	background-repeat: no-repeat;
	background-size: cover;
}


.slide .button.left {
	margin-left: 4px;
	left: 0
}

.slide .button.right {
	margin-right: 4px;
	right: 0;
}

.slide .button.left::before {
	background-image: url("../svg/chevron_left.svg");
}
.slide .button.right::before {
	background-image: url("../svg/chevron_right.svg");
}