.profile-picture {
    --profile-picture-size: 150px;
    --profile-picture-gap: 10px;
    --profile-picture-radius-ratio: var(--button-radius-ratio);

    display: inline-block;
    position: relative;
    width: var(--profile-picture-size);
    height: var(--profile-picture-size);
    line-height: var(--profile-picture-size);
    white-space: nowrap;
    line-height: 0;
    background-color: transparent;
    text-align: center;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    vertical-align: middle;

    border-radius: calc(0.5 * var(--profile-picture-radius-ratio) * var(--profile-picture-size));
}
    .profile-picture.small {
        --profile-picture-size: 40px;
    }
    .profile-picture.gap-left {
        margin-left: var(--profile-picture-gap);
    }
    .profile-picture.gap-right {
        margin-right: var(--profile-picture-gap);
    }
    .profile-picture.with-image {
        background-color: transparent;
    }
    .profile-picture.with-alt {
        background-color: transparent;
    }

    .profile-picture::before {
        display: inline-block;
        content: '';
        width: 0px;
        height: 100%;
        vertical-align: middle;
    }

    .profile-picture > img {
        display: inline-block;
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
        z-index: var(--layer-main);
        line-height: 0;
    }

    .profile-picture .profile-picture-alt {
        display: inline-block;
        font-family: var(--header-font);
        font-weight: normal;
        font-size: calc(0.7 * var(--profile-picture-size));
        line-height: calc(0.7 * var(--profile-picture-size));
        text-transform: uppercase;
        vertical-align: middle;
    }