/*
	CAROUSEL
	variables:
	--columns: number of columns that appear simultaniously;
	--rows: number of rows;
	--step: amount of items to jump;
	--gap: the vertical space between the items;
*/

.carousel {
	display: grid;
	overflow: hidden;
	grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr));
	grid-auto-flow: column;
	grid-auto-columns: calc(100% / var(--columns) - var(--gap) * (1 - 1 / var(--columns)));
	column-gap: var(--gap);
	scroll-behavior: smooth;
}

.carousel-arrow {
	display: grid;
	place-items: center;
	background-color: #FFF;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 4px -1px, rgba(0, 0, 0, 0.1) 0px 5px 10px 0px, rgba(0, 0, 0, 0.1) 0px 1px 12px 0px;
	width: 2.5rem;
	height: 2.5rem;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	transition: background-color .2s, border .2s;
}

.carousel-arrow:hover {
	background-color: #f1f1f1;
}

.carousel-arrow.disabled {
	background-color: #f6f6f6;
}

.carousel-arrow.left {left: -1rem;}
.carousel-arrow.right {right: -1rem;}

.carousel-arrow .icon {
	opacity: .8;
	background-size: contain;
	background-position: center;
	width: 60%;
	height: 60%;
	transition: opacity .2s;
}

.carousel-arrow.disabled .icon {
	opacity: .2;
}

.carousel-arrow.left .icon {background-image: url(../resources/icons/navigation/arrow1-left.svg);}
.carousel-arrow.right .icon {background-image: url(../resources/icons/navigation/arrow1-right.svg);}

@media (max-width: 1024px) {

	.carousel.mob-fluid {
		padding-bottom: 1rem;
		overflow-x: auto;
		scroll-snap-type: inline mandatory;
	}

	.carousel.mob-fluid > * {
		scroll-snap-align: start;
	}

	.carousel.mob-fluid ~ .carousel-arrow {
		display: none;
	}

}

/* Zoom */
.zoom-box {
	overflow: hidden;
}

.zoom {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: transform .6s;
}

@media (min-width: 1441px) {

	.zoom-box:hover .zoom {
		transform: scale(1.1);
	}

}