.hero {
	/*
    All Resolutions
    >>------------->
    */

	position: relative;
	padding-bottom: 315px;
	.container {
		max-width: 375px;
		padding: 0 20px;
		position: relative;
		z-index: 2;
	}

	.hero-copy {
		margin-bottom: 44.5px;
		.description {
			margin-bottom: 22.65px;
		}
		h2 {
			font-family: $font_secondary;
			font-weight: $weight_regular;
			font-style: italic;
			font-size: 69px;
			line-height: 69px;
			margin-bottom: 14.35px;
		}
		p {
			font-size: 16px;
			line-height: 25px;
			padding-right: 50px;
		}
		.form-playnow {
			width: 100%;
			justify-content: flex-start;
		}
	}

	.phone-container {
		position: relative;
		margin: 0 auto;
		width: 327.447px;
		width: 190.58px;
	}

	.phone {
		position: relative;
		width: 327.447px;
		height: 641.25px;
		width: 190.58px;
		height: 372.08px;
		z-index: 2;
		background: url('../img/layout/phone-bg.svg') no-repeat left top;
		background-size: contain;
		padding-top: 7.4px;
		&::after {
			content: '';
		}
		video,
		&::after {
			width: 176px;
			height: 356px;
			border-radius: 10px;
			margin: 0 auto;
			background: url('../img/layout/screen-phone.jpg') no-repeat left top;
			background-size: 100% auto;
			display: block;
		}
		video {
			display: none;
		}
	}
	.shadow,
	.hero-shadow {
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		width: 270.86px;
		height: 438.5px;
		background: url('../img/layout/phone-shadow.svg') no-repeat left top;
		background-size: contain;
	}
	.shadow {
		opacity: 0;
	}

	@include media-breakpoint-up(md) {
		//height: 1051.5px;
		padding-bottom: 413px;
		.container {
			max-width: 878px;
			width: 100%;
			padding: 0 30px;
		}
		.hero-and-phone {
			position: relative;
			display: flex;
			max-width: 1046px;
		}
		.hero-copy {
			max-width: 341px;
			margin: 0;
			margin: 0 139.88px 0 0;
			.description {
				width: 314px;
				margin-bottom: 26px;
			}
			h2 {
				font-size: 75px;
				line-height: 77px;
				margin-bottom: 21px;
			}
			p {
				line-height: 27px;
				padding-right: 0;
			}
		}
		.phone-container {
			width: 256.57px;
			margin: 60.63px 0 0 0;
		}
		.phone {
			width: 235.25px;
			height: 464.25px;
			padding-top: 7.4px;
			video,
			&::after {
				width: 217.45px;
				height: 443.78px;
				border-radius: 10px;
			}
		}
		.shadow,
		.hero-shadow {
			width: 332px;
			height: 544px;
			left: 5.63px;
		}
	}

	@include media-breakpoint-up(xl) {
		.container {
			max-width: 1280px;
			width: 100%;
			padding: 0 40px;
			&.down {
				z-index: -1;
			}
		}
		.hero-and-phone {
			justify-content: space-between;
		}
		.hero-copy {
			max-width: 464px;
			.description {
				width: auto;
			}
			h2 {
				font-size: 100px;
				line-height: 100px;
			}
			p {
				font-size: 18px;
				line-height: 31px;
			}
		}
		.phone-container {
			width: 326.57px;
			margin: 0;
		}

		.phone {
			width: 326.57px;
			height: 640.38px;
			padding-top: 11.4px;
			video,
			&::after {
				width: 302.197px;
				height: 616px;
				border-radius: 10px;
			}
		}
		.shadow,
		.hero-shadow {
			width: 460.45px;
			height: 755px;
			left: 23.37px;
		}
	}
}
