.userProfileBannerContainer {
    padding: 0;
    
    display: grid;
    grid-template-columns: 6fr 4fr 6fr;
    grid-template-rows: 2fr 4fr 2fr;
    
    border: 1px solid var(--border-color-article-main);
}
.userProfileBanner {
    z-index: 0;
    
    width: 100%;
    height: 100%;
    
    grid-column: 1/4;
    grid-row: 1/4;
    
    border: 0;
}
.userProfileBannerProfilePicture {
    object-fit: contain;
    
    width: 100%;
    height: 100%;
    
    aspect-ratio: 1;
    
    border: 0;
    
    z-index: 1;
    
    grid-column: 2/3;
    grid-row: 2/3;
}
.userProfileNameInfoContainer {
    text-align: center;
}
.userProfileInfoDisplayName {
    color: var(--text-color-highlighted);
    font-size: 2.75em;
    
    overflow-wrap: anywhere;
}
.userProfileInfoUserName {
    color: var(--text-color-side);
    font-size: 1.25em;
    font-style: italic;
    
    overflow-wrap: anywhere;
}
.userProfileBioStatusAndAboutContainer {
    margin: 1em 0;
    
    display: grid;
    
    grid-gap: 1em;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}

@media only screen and (min-width: 540px) {
    .userProfileBioStatusAndAboutContainer article {
        margin-top: 0;
        margin-bottom: 1em;
    }
}
@media only screen and (max-width: 539px) {
    .userProfileBioStatusAndAboutContainer {
        display: block;
    }
}

.userProfileBioStatusAndAboutContainer article:first-child:nth-last-child(1) { grid-column: 1/3; grid-row: 1/3;}

.userProfileBioStatusAndAboutContainer article:first-child:nth-last-child(2) { grid-column: 1/2; grid-row: 1/3;}
.userProfileBioStatusAndAboutContainer article:first-child:nth-last-child(2) ~ article:nth-child(2) { grid-column: 2/3; grid-row: 1/3;}

.userProfileBioStatusAndAboutContainer article:first-child:nth-last-child(3) { grid-column: 1/2; grid-row: 1/2;}
.userProfileBioStatusAndAboutContainer article:first-child:nth-last-child(3) ~ article:nth-child(2) { grid-column: 1/2; grid-row: 2/3;}
.userProfileBioStatusAndAboutContainer article:first-child:nth-last-child(3) ~ article:nth-child(3) { grid-column: 2/3; grid-row: 1/3;}

.userProfileBio {
}
.userProfileAbout {
}
.userProfileAbout a {
    color: var(--text-color-side);
}
.userProfileAboutLabel {
    color: var(--text-color-side);
    font-weight: var(--font-weight-bold-main);
}
.userProfileAboutInfo {
    color: var(--text-color-highlighted);
}