main.work {
	text-transform: lowercase;
	.button {
		text-decoration: none;
		padding: 1rem;
		border-radius: 1rem;
		display: inline-grid;
		grid-template-columns: auto 1fr;
		gap: 0.8rem;
		place-items: center;
		svg {
			font-size: 1.5rem;
		}
		&.primary {
			@include box-shadow;
			background-color: var(--color-button-background);
			color: var(--color-button-text);
			&:hover {
				@include box-shadow-heavy;
				background-color: var(--color-button-hover-background);
			}
		}
		&.secondary {
			&:hover {
				background-color: var(--color-button-hover-background);
			}
		}

	}
	#intro {
		background:
			url("/images/backgrounds/ffflux1.png") center / cover;
		background-color: rgba(0,0,0,0.4);
		background-blend-mode: hard-light;
		color: var(--color-background);
		.container {
			background:
				url("/images/puzzlehead.svg") center / cover;
			padding-block: 2rem;
		}
		.tagline {
			margin-block-start: 0;
			margin-inline-end: 4rem;
			em {
				display: block;
			}
			margin-block-end: 1rem;
		}
		.blurb {
			max-width: 40ch;
			font-size: 1.2em;
			margin-block-end: 2.5rem;
			margin-inline-end: 4rem;
		}
		.tagline,
		.blurb {
			width: 15rem;
		}
		@media (min-width: 60rem) {
			.tagline, .blurb {width: 40rem;}
			.container {padding-block: 4rem;}
		}
		@media (min-width: 1200px) {
			.container {
				padding-block: 6rem;
			}
		}
	}
	#praise {
		.title {
			margin-block-end: 4rem;
			text-align: center;
		}
	}
	.testimonials {
		display: flex;
		flex-flow: row wrap;
		gap: 4rem;
		justify-content: center;
		.testimonial {
			display: grid;
			grid-template-areas:
				"bubble bubble"
				"avatar name";
			grid-template-columns: auto 1fr;
			grid-template-rows: auto auto;
			width: 20rem;
			max-width: 90%;
			place-items: center;
			gap: 1rem;
			.avatar {
				border-radius: 100rem;
				grid-area: avatar;
			}
			.name {
				grid-area: name;
				place-self: center start;
			}
			.bubble {
				grid-area: bubble;
				background: green;
				color: white;
				padding: 1rem;
				margin: 0;
				min-height: 6rem;
				width: 100%;
				display: grid;
				place-items: center;
				text-align: center;
				border-radius: 1rem;
				position: relative;
				&:after {
					content: '';
					position: absolute;
					display: block;
					width: 0;
					border: 1rem solid transparent;
					border-top-color: green;
					border-bottom: 0;
					bottom: -0.75rem;
					left: 24px;
				}
			}
		}
	}
	#interstitial {
		background: var(--color-card-background);
		padding-block: 4rem;
		.container {
			max-width: 38rem;
		}
		.title {
			margin-block-start: 0;
		}
	}
	.you {color: hsl(150, 100%, 20%);}
	.me {color: hsl(210, 100%, 40%);}

	.work-items {
		--border-radius: 1rem;
		display: grid;
		gap: 2rem;
		@media (min-width: 30rem) {
			grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
			align-items: stretch;
		}
	}
	.work-item {
		background-color: var(--color-card-background);
		color: var(--color-card-text);
		display: grid;
		grid-template-areas:
			"link"
			"summary";
		grid-template-rows: auto 1fr;
		border-radius: var(--border-radius, 1rem);
		aspect-ratio: 1;
		&__link {
			display: grid;
			grid-template-areas:
				"image"
				"title";
			grid-template-rows: 1fr auto;
			grid-area: link;
		}
		&__image {
			display: block;
			width: 100%;
			grid-area: image;
			border-start-start-radius: var(--border-radius, 1rem);
			border-start-end-radius: var(--border-radius, 1rem);
		}
		&__title {
			grid-area: title;
			padding-inline: 1rem;
			margin-block-end: 0;
		}
		&__summary {
			padding-inline: 1rem;
			grid-area: summary;
			place-self: start;
		}
	}
	.your-item {
		display: grid;
		padding: 2rem;
		border: 4px dashed green;
		border-radius: var(--border-radius, 1rem);
		aspect-ratio: 1;
		place-items: center;
	}
	#hire-me {
		.button {
			span {
				justify-self: start;
			}
		}
		.email {
			margin-block-end: 1rem;
		}
	}
}