abdullahtarawneh.com/assets/scss/content/work/go-fed.scss

#go-fed {
	$gofed-light: #F38D7F;
	$gofed-dark: #740D00;
	$gofed-bg: #EAEAEA;
	$hugo-bg: #0A1922;
	$hugo-text: #E7E8E9;
	$go-bg: #007D9C;
	$go-gopher: #79D4FD;
	overflow: hidden;
	.page-header {
		.container {
			display: grid;
			place-items: center;
		}
		img {
			height: 6em;
		}
		.title {
			margin-bottom: 0;
		}
	}
	.title {
		font-size: 2em;
		font-weight: 700;
		margin-bottom: 2em;
	}
	.conversation {
		display: flex;
		flex-flow: column;
		align-items: center;
		margin-bottom: 1.4em;
		iframe {
			width: 80ch;
			height: 20em;
			max-height: calc(100vh - var(--nav-height));
			max-height: calc(var(--vh) * 100 -  var(--nav-height));
		}
	}
	.quote {
		margin-top: 5em;
		background: $gofed-light;
		color: black;
		font-size: 1.8em;
		line-height: 1.2;
		text-align: center;
		padding: 1em;
		font-family: monospace;
		position: relative;
		&:before{
			content: '“';
			font-family: serif;
			font-size: 2em;
			position: absolute;
			top: -0.4em;
			left: -0.2em;
		}
		&:after {
			content: '”';
			font-family: serif;
			font-size: 2em;
			position: absolute;
			bottom: -0.8em;
			right: -0.2em;
		}
	}
	.attribution {
		margin-bottom: 5em;
		margin-top: 1em;
		display: grid;
		grid-template-columns: 1fr 3em auto;
		gap: 1em;
		justify-content: end;
		align-items: center;
		cite {
			grid-column: 3;
			text-align: right;
			em {
				font-weight: 700;
			}
		}
		picture {
			display: contents;
		}
		img {
			width: 3em;
			height: 3em;
			margin-right: 1em;
			border-radius: 100em;
			grid-column: 2;
		}
	}
	.device-gallery {
		display: grid;
		gap: 1em;
		justify-items: center;
		figcaption {
			padding: 1em;
			max-width: 320px;
			margin: 0 auto;
			text-align: center;
		}
	}
	.device-gallery.mobile {
		figure {
			max-width: 288px;
		}
		figcaption {
			max-width: 320px;
		}
		@media (min-width: 960px) {
			grid-template-columns: repeat(3,1fr);
		}
	}
	#about {
		background: #122e43;
		color: white;
	}
	#before {
		background: $gofed-bg;
	}
	#after {
		.quote {background: #90EE90}
		.quote:before, .quote:after {}
	}
	#hugo {
		background: $hugo-bg;
		color: $hugo-text;
		.quote {
			background: $go-bg;
			color: $hugo-text;
		}
		.quote:before, .quote:after {color: $go-gopher}
	}
}