main {
	& > .image {
		padding-inline:15%;

		@media (max-width:800px){
			padding-inline:5%;
		}
	}
}

.section1 {
	position: relative;
	overflow-x:clip;
}

	.vid {
		position:relative;
		z-index:2;
		mask-image:linear-gradient(0deg,rgba(19, 2, 39, 0) 0%, rgba(19, 2, 39, 1) 30%);
		margin-bottom:0;

		& video {
			width:100%;
			height:auto;
		}

		& .mute {
			position:Absolute;
			z-index:5;
			width: min(35px,5vw);
			right:1rem;
			bottom:1rem;
		}
	}

	.home_logo {
		position:absolute;
		top:40%;
		left:50%;
		transform:translate(-50%,-50%);
		width:90%;
		z-index:3;

		@media screen and (max-width:800px){
			top:50%;
		}
	}

	.img2 {
		position:Relative;
		z-index:2;
		mask-image:linear-gradient(180deg,rgba(19, 2, 39, 0) 0%, rgba(19, 2, 39, 1) 30%, rgba(19, 2, 39, 1) 70%, rgba(19, 2, 39, 0) 100%);
		margin-top:20%;
	}

	.section1 .ctas {
		position:absolute;
		bottom:15vw;
		width:100%;
		z-index:3;

		@media screen and (max-width:800px){
			position:static;
			bottom:unset;
		}
	}

.pad {
	padding-inline:5%;
}

.text {
	position: relative;
	z-index:3;
	width:100%;
	margin-block:clamp(2rem,5vw,5rem);
	margin-top:-5%;
	max-inline-size:900px;
	margin-inline:auto;

	@media screen and (max-width:800px){
		margin-top:clamp(2rem,5vw,5rem);
	}

	& p {
		font-size:1.6rem;
		text-align: center;

		@media screen and (max-width:800px){
			font-size: 1.2rem;
		}
	}
}

.ctas2 {
	padding-block:clamp(2rem,5vw,5rem);
}

.trailer {
	padding-bottom:clamp(2rem,5vw,5rem);
	text-align: center;

	& video {
		margin-inline: auto;
		border:2px solid #d6d6d6;
		border-radius:1rem;
		overflow:hidden;
		max-height:calc(100vh - 100px);
		max-width:100%;
	}
}

.mob {
	display:none;
	@media screen and (max-width:800px){
		display:block;
	}
}
.desktop {
	@media screen and (max-width:800px){
		display:none;
	}
}

.quotes {
	position: relative;
	z-index:6;
	padding:0 5%;
	display:grid;
	grid-template-columns: repeat(4,1fr);
	grid-gap:2vw;
	color:#fff;
	margin-block:5vw;
	text-align: center;
	font-family: 'Oswald', sans-serif;
}

	.quotes .stars {
		display:block;
		text-align: center;
		margin:0 0 1vw 0;
	}

	.quotes p {
		font-size:2vw;
		line-height:1;
		/* text-shadow:0 0 30px #ffffff55; */
		text-transform: uppercase;
		margin:0;
		font-weight:bold;
		letter-spacing: -0.03em;
	}

		.quotes p.quote-normal {
			margin-top:-0.4vw;
			margin-bottom:0.6vw;
		}
		.quotes p.quote-large {
			font-size:4vw;
			margin-bottom: 0.6vw;
  			margin-top: -0.65vw;
		}

		.quotes .quote h3 {
			margin-top:0.25em;
			font-size:1.25vw;
			text-transform: uppercase;
			font-weight:bold;
		}

		.quote {
			/* filter:drop-shadow(0 0 2em #000) drop-shadow(0 0 5em #000); */
		}

		.quote h3.blue {
			color:var(--blue);
		}
		.quote h3.yellow {
			color:var(--yellow);
		}
		.quote h3.pink {
			color:var(--pink);
		}
		.quote h3.green {
			color:var(--green);
		}
		.quote h3.red {
			color:var(--red);
		}
		.quotes .stars img {
			display:inline-block;
			height:2vw;
			width:unset;
		}

@media screen and (width < 700px){
	.quotes {
		grid-template-columns: 1fr 1fr;
	}

		.quotes p.quote-normal {
			font-size:4vw;
		}
		.quotes p.quote-large {
			font-size:7vw;
		}

		.quotes .quote h3 {
			font-size: 2vw;
		}

		.quotes .stars img {
			height:5vw;
		}
}