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(100vh - var(--header-height) - var(--nav-height));
		max-height: calc(var(--vh) * 100 - var(--header-height) - var(--nav-height));
		@media (min-width: $container-width) {
			max-height: calc(100vh - var(--header-height));
			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.5em;
		line-height: 1.1;
	}
	.blurb {
		font-size: 1.1em;
		margin-bottom: 2em;
		max-width: 38ch;
		line-height: 1.4;
	}
	.button {
		background: #06f;
		color: white;
		width: max-content;
		i {margin: 0;}
		span {display: none;}
		border-radius: 100em;
		@include box-shadow;
		justify-self: start;
		align-self: start;
		position: absolute;
		bottom: 1em;
		right: 1em;
	}
	@media (max-width: $container-width) {
		@media (min-height: 25em) {
			.tagline {
				font-size: clamp(1.5em,6vw,3em)
			}
			.blurb {
				font-size: clamp(1.1em, 3vw, 1.25em)
			}
		}
		@media (min-height: 31.25em) {
			@media (min-width: 32em) {
				.button {
					position: revert;
					span {display: block;}
					padding: 1em 2em;
				}
				aspect-ratio: 7.7/7;
			}
			@media (min-width: 37.5em) {
				aspect-ratio: 640 / 540
			}
			@media (min-width: 40em) {
				aspect-ratio: 720 / 600
			}
			@media (min-width: 42.5em) {
				aspect-ratio: 744 / 600
			}
			@media (min-width: 50em) {
				aspect-ratio: 800 / 620
			}
			@media (min-width: 52.5em) {
				aspect-ratio: 840 / 640
			}
			@media (min-width: 55em) {
				aspect-ratio: 880 / 640
			}
		}
	}
	@media (min-width: $container-width) {
		@media (min-height: 25em) {
			.tagline {font-size: 3em}
			.blurb {font-size: 1.25em}
			.button {
				position: revert;
				span {display: block;}
				padding: 1em 2em;
			}
			max-height: 46em;
		}
		@media (min-height: 48em) {
			.tagline {margin-top: 1em;}
		}
	}
}