.fade-tab {
	animation: fade-tab 0.35s;
}

@keyframes fade-tab {
	0% {
		opacity: 0;
		transform: translateX(-2rem);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.v-tabs {
	display: flex;
	flex-direction: column;
}

.v-tab {
	&__items {
		display: flex;
		// justify-content: center;

		overflow-x: auto;
		scroll-snap-type: x mandatory;

		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		margin: 1rem 0;
	}
	&__item {
		background-color: white;
		cursor: pointer;
		border: 0;
		font-size: 4rem;
		padding: 1rem;
		flex-grow: 1;
		margin: 5px;
		border-radius: 4px;
		border: 2px solid $primary;
		color: $primary;
		transition: all 0.4s ease;
		&.active {
			@include gradient-gen($primary);
			color: white;
		}
	}
}

.v-tab {
	&__content {
		margin: 5px;
	}
	&__pane {
		z-index: 2;
		display: flex;
		flex-direction: row;
		&.reverse {
			flex-direction: row-reverse;
			.v-tab__description {
				padding: 1rem 0;
				padding-right: 2rem;
			}
		}
	}
	&__img {
		width: 50%;
		height: 400px;
		@include gradient-gen($primary);
		border-radius: 8px;
		img {
			@include boxshadow-md($primary-text-dark);
			width: 100%;
			height: 400px;
			display: block;
			object-fit: cover;
			border-radius: 8px;
		}
	}
	&__description {
		width: 50%;
		padding: 1rem 2rem;
		padding-top: 0;
		line-height: 2;

		&--title {
			font-size: 22px;
			color: $primary;
		}
		p {
			font-family: $font-secondary;
			font-size: 1rem;
		}
	}
}

@media (max-width: 960px) {
	.v-tab {
		&__pane {
			flex-direction: column;
			&.reverse {
				flex-direction: column;
				.v-tab__description {
					padding: 1rem 0;
				}
			}
		}
		&__img {
			width: 100%;
		}
		&__description {
			width: 100%;
			padding: 1rem 0;
		}
	}
}
@media (max-width: 760px) {
	.v-tab {
		&__items {
			// position: sticky;
			// top: 60px;
			background-color: white;
			z-index: 8;
		}
		&__item {
			font-size: 2.5rem;
			padding: 0.5rem 1rem;
		}
		&__img {
			width: 100%;
			height: 200px;
			img {
				height: 200px;
			}
		}
	}
}