.home-hero-wrapper {

	position: relative;
	background: var(--gradient-linear-background);
	overflow: hidden;

	.background-cut {
		z-index: 5;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 90%;

		@media screen and (max-width: 40rem) {
			width: 60rem;
			height: 30rem;
		}
	}

	.home-hero { // force hero content back on top
		z-index: 10;
		position: relative;
	}

}

.home-hero {
	@extend .frame;

	display: flex;
	align-items: center;
	
	@media screen and (max-width: 40rem) {
		flex-direction: column;
		align-items: stretch;
	}

	.text {
		flex: 1;
		
		padding-bottom: 12rem;
		@media screen and (max-width: 40rem) {
			padding-bottom: 0;
		}

		/*
		&::after {
			content: '';
			display: block;
			float: right;
			width: 50%;
			height: 64px;
			background: #f00;
			shape-outside: polygon(100% 0%, 100% 100%, 0% 100%);
			clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
		}
		*/
	}
	
	h1 {
		margin: 0.333em 0;

		background: var(--gradient-radial-text);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;

		font-size: 2.5em;
	}

	.picture {
		flex: 1;

		padding-left: 1rem;
		@media screen and (max-width: 50rem) {
			flex: 0;
			padding-right: 2rem;
		}
		@media screen and (max-width: 40rem) {
			padding: 3rem 1rem;
		}

		text-align: center;
	}

	.screenshot {
		box-shadow: var(--elevation-8);
		border-radius: 1rem;
		width: 15rem;
	}

}


.features {
	@extend .frame;

	display: flex;
	@media screen and (max-width: 40rem) {
		flex-direction: column-reverse;
	}

	.grow {
		flex: 1;
	}

	.material-icons {
		font-size: 10rem;
		@media screen and (max-width: 40rem) {
			font-size: 6rem;
		}
		
		background: var(--gradient-radial-text);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}

}


.getnotified-wrapper {

	background: var(--gradient-linear-background);

}

.getnotified {
	@extend .frame;
	
	max-width: 60rem;
	color: #fff;

	form {
		border-radius: 0.5rem;
		box-shadow: var(--elevation-4);
		overflow: hidden;

		display: flex;

		font-size: 1.5rem;
		@media screen and (max-width: 40rem) {
			font-size: 1rem;
		}
	}

	input[type=email] {
		flex: 1;
		min-width: 0;
		border: none;

		padding: 0.5em 1em;
		color: var(--color-text);
	}

	button[type=submit] {
		cursor: pointer;
		border: none;

		padding: 0.125em 0.5em;
		color: var(--color-primary);
		background: #fff;
		font-size: 2em;
	}

}