main {
    margin-top: 100vh;
    gap: var(--spacing-xl);
    align-items: center;
}

/* Re-enable pointer events only for actually interactive elements */
main a,
main button,
main h2,
main p,
main h1,
main h2,
main h5,
main h6,
main img {
    pointer-events: auto;
}

.profile, .extended {
    width: 100%;
}

.extended {
    max-width: calc(var(--maxWidth) * 2/3);

    display: flex;
    flex-flow: column nowrap;
    gap: var(--spacing-xl) var(--spacing-4xl);
}

/* This targets the non-heading elements, since heading is in h2 and not div */
.extended > div {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: var(--spacing-l);
}

/* MEDIA QUERIES */
@media (max-width: 800px) {
    .extended > div {
        grid-template-columns: 1fr;
    }

    .extended .label, .extended .info-column {
        text-align:center;
    }
}