.about-me {
    display: flex;
    flex-direction: column;
    gap: var(--space-symmetric);
    max-width: var(--width-max-content);
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-symmetric);
}

.about-me .card > div {
    padding-left: var(--space-symmetric);
    border-left: var(--border-thin);  
    transition: all .4s ease;
}

.about-me .card:hover > div {
    border-left: var(--border-thin--hover);
}

.about-me__content ol {
    margin-left: 2em;
    list-style: auto;
}
.about-me__social {
    padding: var(--space-symmetric);
}

.about-me__social h2 {text-align: center;}

.about-me__social ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-symmetric);
}

.about-me__social li {
    flex: 1 0 7.5rem;
    margin: 0;
}

.about-me__social a {
    display: block;
    height: 100%;
    padding: var(--space-symmetric);
    font-size: clamp(0.75rem, 1rem, 4rem);
    text-align: center;
    text-decoration: none;
    border: solid 2px var(--clr-gold);
    border-radius: var(--border-radius);
}

.about-me__social a:hover {
    box-shadow: 0 0 8px 4px rgb(255 255 255 / 16%);
}

.about-me__social a svg {
    display: block;
    max-width: 4.5rem;
    max-height: 4rem;
    margin: 0 auto var(--space-small-symmetric);
}