.tm-slider-macbook-frame {
	position: relative;

	.swiper-inner {
		position: relative;
		padding-top: 30px;
	}

	.macbook-frame-wrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: 602px;
			height: 440px;
			transform: translateX(-50%);
			background: #d9d9d9;
		}

		.macbook-frame {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 99;
			width: 860px;

			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				height: 100%;
				width: 70%;
				left: 15%;
				box-shadow: 0 160px 70px -60px rgba(51, 51, 51, 0.13);
			}
		}
	}

	.swiper-slide {
		width: 602px;
		text-align: center;

		.image {
			margin-bottom: 60px;

			img {
				box-shadow: 0 30px 40px rgba(0, 0, 0, .08);
			}
		}
	}
}

@include media-breakpoint-down(lg) {
	.tm-slider-macbook-frame {
		.swiper-inner {
			padding-top: 20px;
		}

		.macbook-frame-wrap {
			.macbook-frame {
				width: 582px;
			}

			&:before {
				width: 410px;
				height: 280px;
			}
		}

		.swiper-slide {
			width: 400px;
		}
	}
}

@include media-breakpoint-down(sm) {
	.tm-slider-macbook-frame {
		.swiper-inner {
			padding-top: 15px;
		}

		.macbook-frame-wrap {
			.macbook-frame {
				width: 432px;
			}

			&:before {
				width: 310px;
				height: 210px;
			}
		}

		.swiper-slide {
			width: 300px;
		}
	}
}

@include media-breakpoint-down(xs) {
	.tm-slider-macbook-frame {

		.macbook-frame-wrap {
			.macbook-frame {
				width: 360px;
			}

			&:before {
				width: 260px;
				height: 180px;
			}
		}

		.swiper-slide {
			width: 250px;
		}
	}
}