.banner-3d {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	perspective: 2500px;
	transition: all 0.5s;
}

.banner-3d .banner-3d__wrapper {
	transition: all 0.5s;
	width: 100%;
	z-index: -1;
}

.banner-3d .banner-3d__hover-img {
	opacity: 0;
	transition: all 0.5s;
	position: absolute;
	z-index: -1;
}


@media(min-width: 1200px) {

	.banner-3d .banner-3d__wrapper::before,
	.banner-3d .banner-3d__wrapper::after {
		content: "";
		opacity: 0;
		width: 100%;
		height: 80px;
		transition: all 0.5s;
		position: absolute;
		left: 0;
	}

	.banner-3d .banner-3d__wrapper::before {
		top: 0;
		height: 100%;
		background-image: linear-gradient(to top, transparent 100%, rgba(12, 13, 19, 0.5) 68%, rgba(12, 13, 19, 0.8) 97%);
	}

	.banner-3d .banner-3d__wrapper::after {
		bottom: 0;
		opacity: 1;
	}

	.banner-3d:hover .banner-3d__wrapper {
		transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0) scale(0.8);
		box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
		-webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
		-moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
		filter: blur(1px);
	}

	.banner-3d:hover .banner-3d__wrapper::before,
	.banner-3d:hover .banner-3d__wrapper::after {
		opacity: 1;
	}

	.banner-3d:hover .banner-3d__wrapper::after {
		height: 100%;
		background-image: linear-gradient(to bottom, transparent 0%, rgba(12, 13, 19, 0.5) 68%, rgba(12, 13, 19, 0.8) 97%);
	}

	.banner-3d:hover .banner-3d__hover-img {
		opacity: 1;
		transform: translate3d(0, -28%, 0) scale(1.15);
		z-index: 1;
	}
}

@media (min-width: 1600px) {
	.banner-3d:hover .banner-3d__hover-img {
		transform: translate3d(0, -38%, 0) scale(1.15);
	}
}