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

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

	&::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;

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

	border-block-end: 1px solid var(--colour-primary-fg);
}

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

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

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

			h3 {
				&::after {
					content: '/';
					margin-inline: var(--spacing-inline-sm);
				}
			}

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

				li + li::before {
					content: '•';
					margin-inline-end: var(--spacing-inline-sm);
				}
			}
		}
	}
}

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

		li {
			margin-block-start: var(--spacing-block-sm);
		}
	}
}