abdullahtarawneh.com/assets/scss/components/intro.scss

#intro {
	--headerHeight: 4em;
	--navHeight: 4em;
	background-color: rgb(80, 102, 124);
	color: #fff;
	
	padding: 0;
	display: flex;
	flex: 1;
	.container {
		display: grid;
		grid-template-rows: auto auto 1fr;
		position: relative;
		padding: 1em;

		background-image: url('/images/puzzlehead.svg');
		background-size: contain;
		background-position-x: right;
		background-position-y: bottom;
		background-repeat: no-repeat;

		aspect-ratio: 1;
		max-height: calc(var(--vh) * 100 - var(--header-height) - var(--nav-height));
		@media (min-width: $container-width) {
			max-height: calc(var(--vh) * 100 - var(--header-height));
		}
	}
	.tagline {
		font-size: 1.5em;
		font-weight: 700;
		em {color: #76ff03;font-style: italic;}
		margin-bottom: 0.7rem;
		line-height: 1.1;
	}
	.blurb {
		margin-bottom: 2.5em;
		max-width: 30ch;
		font-size: 1.1em;
		line-height: 1.4;
	}
	.button {
		background: #06f;
		color: white;
		width: max-content;
		i {margin: 0;}
		span {display: none;}
		@media (min-width: 30em) {
			span {display: block;}
			padding: 1em 2em;
		}
		border-radius: 100em;
		@include box-shadow;
		justify-self: end;
		align-self: end;
		position: absolute;
		bottom: 1em;
		right: 1em;
	}
}