abdullahtarawneh.com/content/work/trilogy/style.scss

main.trilogy {
	background: #002663;
	color: white;
	.container {
		max-width: 60rem;
	}
	.page-header {
		.container {
			display: grid;
			@media (min-width: 60rem) {
				grid-template-columns: auto 1fr;
			}
			gap: 1em;
			justify-items: center;
		}
	}
	.page-title {
		color: white;
		line-height: 1.4;
		font-weight: 700;
		font-size: 1.75em;
		text-align: center;
		@media (min-width: 51.75em) {
			text-align: left;
		}
	}
	.cover-image {
		width: 100%;
		max-width: max-content;
		height: auto;
		place-self: center;
	}
	.separator {
		width: 10em;
		height: 0.5em;
		border-radius: 100em;
		border: none;
		background: white;
	}
	.title {
		font-size: 2em;
		font-weight: 700;
		position: relative;
		margin-bottom: 2em;
		margin-top: 3em;
	}
	#about {
		.title {
			&:before {
				content: 'intro';
				position: absolute;
				top: -1.5em;
				left: 0;
				font-size: 2em;
				font-weight: 900;
				color: #A9B7D1;
				text-align: right;
			}
		}
		.companies {
			list-style: none;
			display: flex;
			flex-flow: row wrap;
			font-size: 3em;
			font-family: monospace;
			gap: 1em;
			margin: 2em 0;
			color: #B3BAD0;
		}
		strong {
			display: block;
			font-weight: 700;
			background: #277766;
			color: white;
			white-space: pre;
			padding: 0.25em 0.5em;
			margin-top: 0.15em;
			width: min-content;
		}
	}
	#responsibilities {
		display: flex;
		flex-flow: column;
		overflow: hidden;
		.container {
			display: flex;
			flex-flow: column;
			gap: 2em;
		}
		.title {
			&::before {
				content: 'what i did';
				position: absolute;
				top: -1.5em;
				right: -.2em;
				font-size: 2em;
				font-weight: 900;
				opacity: 0.5;
				text-align: center;
			}
		}
		section {
			width: 100%;
			max-width: 45em;
			margin: auto;
		}
	}
	.subtitle {
		font-size: 1.6em;
		font-weight: 700;
		margin-top: 2em;
		margin-bottom: 1em;
		position: relative;
	}
	p {
		line-height: 1.4;
		max-width: 45ch;
		font-size: 1.2em;
		margin-bottom: 1.4em;
	}
	#quick-learning {
		.subtitle {
			&:before {
				content: '01';
				position: absolute;
				top: -1em;
				left: -0em;
				font-size: 4em;
				font-weight: 900;
				color: #54A090;
			}
		}
	}
	#problem-solving {
		text-align: right;
		p {margin-left: auto;}
		.subtitle {
			margin-top: 5em;
			&:before {
				content: '02';
				position: absolute;
				top: -1em;
				right: 0em;
				font-size: 4em;
				font-weight: 900;
				color: #54A090;
			}
		}
	}
	#writing-articles {
		display: flex;
		flex-flow: column;
		align-items: center;
		.subtitle {
			margin-top: 5em;
			&:before {
				content: '03';
				position: absolute;
				top: -1em;
				right: calc(50% - 1ch);
				font-size: 4em;
				font-weight: 900;
				color: #54A090;
			}
		}
	}
	#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 {
		box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
		0 2px 2px rgba(0,0,0,0.11), 
		0 4px 4px rgba(0,0,0,0.11), 
		0 6px 8px rgba(0,0,0,0.11),
		0 8px 16px rgba(0,0,0,0.11);
		&__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.35;
				color: #002663;
			}
		}
		.card__text {
			margin-left: auto;
		}
	}
	#tkb {
		position: relative;
		.card__title {
			position: relative;
			z-index: 1;
			&:before {
				content: 'TKB';
				position: absolute;
				top: -0.5em;
				right: 0;
				font-size: 4em;
				font-weight: 900;
				opacity: 0.35;
				color: #002663;
				z-index: -1;
			}
		}
	}
	#tnc {
		.subtitle {
			margin-top: 5em;
			&:before {
				content: '04';
				position: absolute;
				top: -1em;
				left: 0;
				font-size: 4em;
				font-weight: 900;
				color: #54A090;
			}
		}
	}
}