#values .swiper-slide {
	position: relative;
	opacity: 0;
	transition: opacity .4s ease-out;
}
#values .swiper-slide-active {
	opacity: 1;
}
@media (min-width: 900px) {
	#values .swiper-slide {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		column-gap: 50px;
	}
}
@media (max-width: 899.99px) {
	#values .swiper-slide {}
}

/*--------------------------------------------------------------------------------*/

#values .swiper-slide > .non-actionable-area {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
    background-color: transparent;
}
#values .swiper-slide > .non-actionable-area ~ div {
	position: relative; z-index: 2;
}

/*--------------------------------------------------------------------------------*/

#values .swiper-slide > .image {
	overflow: hidden;
	isolation: isolate;
}
#values .swiper-slide > .image:before {
	content: '';
	display: block;
	padding-top: 100%;
}
#values .swiper-slide > .image > img {
	position: absolute; top: 0; left: 0;
	height: 100%; width: 100%;
	
	object-fit: cover;
	object-position: center;
}
@media (min-width: 900px) {
	#values .swiper-slide > .image {
		height: 400px; flex: 0 0 400px;
		border-radius: 40px;
	}
}
@media (max-width: 899.99px) {
	#values .swiper-slide > .image {
		max-width: 350px;
		margin: 0 auto 50px;
		
		border-radius: 30px;
	}
}

/*--------------------------------------------------------------------------------*/

#values .swiper-slide > .content {
	transition:
		opacity	  .8s ease-out,
		transform .8s ease-out;
}
#values .swiper-slide-next > .content {
	opacity: 0;
	transform: translateY(-40px);
}
#values .swiper-slide-active > .content {
	opacity: 1;
	transform: translateY(0);
}
#values .swiper-slide-prev > .content {
	opacity: 0;
	transform: translateY(40px);
}
@media (min-width: 900px) {
	@media (min-width: 1200px)	  { #values .swiper-slide > .content { flex: 0 0 calc(50% - 50px - 200px); } }
	@media (max-width: 1199.99px) { #values .swiper-slide > .content { flex: 1; } }
}
@media (max-width: 899.99px) {
	#values .swiper-slide > .content {
		max-width: 350px;
		margin: 0 auto;
		
		text-align: center;
	}
}

/*--------------------------------------------------------------------------------*/

#values .swiper-slide > .content > .title {
	margin-bottom: 20px;
	
	text-transform: uppercase;
	font-family: 'Stretch Pro';
	font-size: 24px;
}
#values .swiper-slide > .content > .description {
	font-size: 14px;
	font-weight: 500;
}