abdullahtarawneh.com/assets/scss/work/trilogy/index.scss

#trilogy {
	background: #002663;
	color: white;
	.page-header {
		.container {
			display: grid;
			@media (min-width: 51.75em) {
				grid-template-columns: auto 1fr;
			}
			gap: 1em;
			justify-items: center;
		}
	}
	.page-title {
		color: white;
		line-height: 1.4;
		font-weight: 400;
		font-size: 1.75em;
		text-align: center;
		@media (min-width: 51.75em) {
			text-align: left;
		}
	}
	.cover-image {
		width: auto;
		height: 100%;
	}
	.separator {
		width: 10em;
		height: 0.5em;
		border-radius: 100em;
		border: none;
		background: white;
	}
	#responsibilities {
		display: flex;
		flex-flow: column;
		overflow: hidden;
		.container {
			display: flex;
			flex-flow: column;
			gap: 2em;
		}
		.title {
			font-size: 2em;
			font-weight: 700;
			position: relative;
			margin-bottom: 2em;
			margin-top: 3em;
			&::before {
				content: 'Responsibilities';
				position: absolute;
				top: -0.5em;
				left: -0.5em;
				font-size: 4em;
				font-weight: 900;
				opacity: 0.2;
			}
		}
		section {
			width: 100%;
			max-width: 45em;
			margin: auto;
		}
	}
	.subtitle {
		font-size: 1.6em;
		font-weight: 700;
		margin-top: 2em;
		margin-bottom: 1em;
		position: relative;
	}
	.blurb {
		line-height: 1.4;
		max-width: 45ch;
		font-size: 1.2em;
	}
	#quick-learning {
		.subtitle {
			&:before {
				content: '01';
				position: absolute;
				top: -0.5em;
				left: -0.25em;
				font-size: 4em;
				font-weight: 900;
				opacity: 0.2;
			}
		}
	}
	#problem-solving {
		text-align: right;
		display: flex;
		flex-flow: column;
		align-items: end;
		.subtitle {
			&:before {
				content: '02';
				position: absolute;
				top: -0.5em;
				right: -0.25em;
				font-size: 4em;
				font-weight: 900;
				opacity: 0.2;
			}
		}
	}
	#writing-articles {
		display: flex;
		flex-flow: column;
		align-items: center;
		.subtitle {
			&:before {
				content: '03';
				position: absolute;
				top: -0.5em;
				right: calc(50% - 1ch);
				font-size: 4em;
				font-weight: 900;
				opacity: 0.2;
			}
		}
	}
	#kba {
		display: grid;
		gap: 1em;
		@media (min-width: 40em) {
			grid-template-columns: 1fr 1fr;
		}
		section {
			background: white;
			color: black;
			height: 100%;
			padding: 1em;
			border-radius: 0.375em;
		}
	}
	.card {
		&__title {
			margin-top: 1em;
			margin-bottom: 2em;
			font-size: 1.25em;
		}
		&__text {
			font-size: 1em;
			line-height: 1.4;
		}
	}
	#skb {
		text-align: right;
		.card__title {
			position: relative;
			&:before {
				content: 'SKB';
				position: absolute;
				top: -0.5em;
				left: 0;
				font-size: 4em;
				font-weight: 900;
				opacity: 0.15;
			}
		}
	}
	#tkb {
		.card__title {
			position: relative;
			&:before {
				content: 'TKB';
				position: absolute;
				top: -0.5em;
				right: 0;
				font-size: 4em;
				font-weight: 900;
				opacity: 0.15;
			}
		}
	}
	#tnc {
		.subtitle {
			&:before {
				content: '04';
				position: absolute;
				top: -0.5em;
				right: 0;
				font-size: 4em;
				font-weight: 900;
				opacity: 0.2;
			}
		}
	}
}