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);
}