div:has(img) {
	width: 6rem;
	height: 6rem;
	margin-inline: auto;
}

div img {
	width: 6rem;
	height: 6rem;
	border-radius: 1rem;
	filter: contrast(1.25);
}

div:has(img)::after {
	/* Colour overlay */
	background-color: var(--colour-primary-80);
	opacity: 0.3;

	/* Same size and shape as the img */
	border-radius: 1rem;
	width: 6rem;
	height: 6rem;

	/* Positioned on top of the img */
	display: block;
	position: relative;
	top: -6rem;

	/* A content value is needed to get the ::after to render */
	content: '';
}

header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	text-align: center;
	border-block-end: 1px solid var(--colour-primary-fg);
}

header h1 {
	grid-column: 1 / 3;
	text-align: center;
}

.technical-skills h3 {
	text-align: start;
}

.technical-skills ul {
	color: var(--colour-primary-fg-accent);
	margin-inline-start: var(--spacing-inline-md);
}

@media (min-width: 46rem) {
	.technical-skills section {
		display: flex;
		gap: var(--spacing-inline-sm);
		align-items: baseline;
	}

	.technical-skills section h3::after {
		content: '/';
		margin-inline: var(--spacing-inline-sm);
	}

	.technical-skills section ul {
		display: flex;
		gap: var(--spacing-inline-sm);
		list-style: none;
		margin-inline-start: 0;
	}

	.technical-skills section ul li + li::before {
		content: '•';
		margin-inline-end: var(--spacing-inline-sm);
	}
}

:is(.experience, .passions) :is(ol, ul) {
	list-style: none;
	margin-inline: 0;
}

:is(.experience, .passions) :is(ol, ul) li {
	margin-block-start: var(--spacing-block-sm);
}
