#hero {
	display: flex;
	flex-direction: column;
	height: calc(100vh + 4.5rem);
	align-items: center;
	justify-content: center;
	color: var(--white);
	background: radial-gradient(at bottom, #00d4ff, blue 40%, black 90%);
	margin: 0 -3rem;

	h1,
	p {
		text-align: center;
		line-height: initial;
		margin: 0;
	}

	h1 {
		font-size: 6.5rem;
		text-transform: uppercase;
	}

	p {
		font-size: 2rem;
	}

	&::after {
		content: "";
		position: absolute;
		bottom: -4.5rem;
		border-radius: 1.5rem 1.5rem 0 0;
		background: linear-gradient(#7d88e5, var(--light_blue));
		height: 5rem;
		width: 100%;
	}
}

#landingbody {
	margin: 5rem auto;
	display: flex;
	flex-direction: column;
	gap: 5rem;
	max-width: 60rem;

	section {
		display: flex;
		flex-direction: column;
		align-items: center;

		&#description,
		&#cta {
			color: var(--black);
			text-align: center;

			h2 {
				font-size: 2.4rem;
				line-height: 2.6rem;
			}
		}

		&#description h2 {
			text-wrap: initial;
			padding: 0 4rem;
		}

		&#cta {
			background: var(--blue);
			border-radius: 0.5rem;
			padding: 4rem 2rem;
			box-shadow: inset 0 0 1rem var(--dark_blue);
			gap: 2rem;

			a {
				font-size: 1.2rem;
			}
		}

		&.card {
			display: flex;
			flex-direction: row;
			gap: 1rem;
			background: var(--grey);
			border-radius: 0.5rem;
			padding: 2rem;
			box-shadow: 0 0 0.75rem var(--grey);

			h2,
			p {
				flex: 1;
				margin: 0;
			}

			a {
				color: inherit;
			}
		}
	}
}

@media (max-width: 700px) {
	#hero {
		margin: 0 -0.8rem;
	}

	#landingbody {
		margin: 5rem 0.8rem;

		section {
			&.card {
				flex-direction: column;
				align-items: inherit;
			}

			&#description h2 {
				padding: 0;
			}

			&#cta {
				padding: 4rem 1rem;
			}
		}
	}
}

@media (max-width: 550px) {
	#hero {
		h1 {
			font-size: 4rem;
		}

		p {
			font-size: inherit;
		}
	}
}