.carousel-item {
	position: relative;
	max-height: 600px;
}

.carousel-item picture {
	min-width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.carousel-images {
	min-width: 100%;
	min-height: 100%;
}

.carousel-btn-wrapper {
	display: block;
	position: absolute;
	right: 10%;
	bottom: 10%;
}

.carousel-btn {
	display: block;
	padding: 1rem 1.5rem;
	color: white;
	font-weight: bold;
	background-color: rgba(255, 255, 255, .3);
	border: 2px solid white;
	border-radius: 15px;
	transition: transform 0.3s ease-in-out;
	min-width: max-content;
}

.carousel-btn:hover {
	text-decoration: none;
	transform: scale(1.1) !important;
	color: white;
}

.indicator-number {
	position: absolute;
	left: 0;
}

.indicator-name, .indicator-number {
	font-weight: bold;
}

.text-indicator {
	margin: 1rem 0rem;
	border-top: 1px solid var(--gray85);
	transition: transform 0.3s ease-in-out, border 0.4s ease-in-out;
}

.text-indicator.active {
	border-top: 1px solid var(--terrandaBrown);
}

.text-indicator p {
	color: var(--gray85);
	transition: color 0.4s ease-in-out;
}

.text-indicator.active p {
	color: var(--terrandaBrown);
}

.text-indicator:hover {
	text-decoration: none;
	transform: scale(1.1);
}

/*=====================================
=            Media Queries            =
=====================================*/

	@media (min-width:1200px) {
		.carousel-item {
			max-height: 800px;
		}
	}

	@media (max-width: 768px) {
		.carousel-item {
			height: 400px;
			overflow: hidden;
		}

		.carousel-btn-wrapper {
			display: block;
			position: absolute;
			right: 50%;
			bottom: 50%;
			transform: translate(50%, 50%);
		}

		.carousel-item picture {
			min-width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.carousel-images {
			position: absolute;
			height: 100%;
			width: 100%;
			object-fit: cover;
		}
	}