#index {
	.title {
		font-size: 1.5em;
		font-weight: 700;
		line-height: 1.2;
		&:before {
			font-size: 3em;
			font-weight: 700;
			color: #ddd;
			position: absolute;
			top: -0.5em;
			left: -0.3em;
			z-index: -1;
		}
		position: relative;
		margin-bottom: 2em;

	}
	.subtitle {
		font-size: 1.5em;
		line-height: 1.2;
		margin-bottom: 0.5em;
		margin-top: 2em;
	}
	#bio {
		.title:before {
			content: 'bio';
		}
		.blurb {
			line-height: 1.4;
			font-size: 1.1em;
		}
	}
	#skills {
		.container {
			display: grid;
			grid-template-columns: repeat(auto-fit,minmax(15em,1fr));
			gap: 2em;
		}
		.title {grid-column: 1 / -1;}
		.title:before {
			content: 'skills';
		}
		.card {
			display: grid;
			grid-template-areas: "img" "title" "desc";
			grid-template-rows: auto auto 1fr;
			&__title {
				grid-area: title;
				font-weight: 700;
				font-size: 1.1em;
				line-height: 1.2;
				margin: 0.5em 0;
			}
			&__desc {
				grid-area: desc;
				line-height: 1.4;
			}
			&__img {
				width: 100%;
				aspect-ratio: 16/9;
				object-fit: contain;
				grid-area: img;
				border-radius: 1em;
			}
			&.sysadm .card__img {padding: 1em;}
		}
	}

	#contact {
		.title:before {
			content: 'contact';
		}
	}
}