#intro {
    margin-bottom: var(--general-spacing);
    display: grid;
    grid-template-columns: 2fr 1px 3fr;
    grid-template-areas:
        "Avatar Vertical-line Description";
}



.vertical-line {
    grid-area: Vertical-line;
    color: var(--colour1);
    background-color: var(--colour1);
    width: 3px;
    height: 90%;
    align-self: center;
  }

#header-avatar-div {
    grid-area: Avatar;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
}

#header-avatar {
    width: 100%;
}

.description-div {
    grid-area: Description;
    color: var(--colour0);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.description-div > hr {
    width: 100%;
}

.description-header {
    color: var(--colour0);
    border: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 500px) {
    #intro {
        margin-bottom: var(--general-spacing);
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "Avatar"
            "Description";
    }

    .vertical-line {
        display: none;
    }
}