.profile .field--name-user-picture {
    float: right;
    aspect-ratio: 3 / 4;
    border-radius: var(--br-m);
    overflow: hidden;
    max-width: 260px;
    height: auto;
    object-fit: cover;
    object-position: center;
    border: 1px solid var(--gray-light2);
    margin-left: var(--margin-l);
    margin-bottom: var(--margin-m);

    img {
        aspect-ratio: 3 / 4;

        object-fit: cover;
        object-position: center;
    }
}

/* ***** node author info *** */ 

.node .view-user-profile-view {
    margin-bottom: var(--margin-m);
}

.node .view-user-profile-view .views-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--margin-s);

    border: 1px solid var(--gray-light);
    border-radius: var(--br-m);
    padding: var(--margin-m);

    background-color: var(--white);
}

.node .view-user-profile-view .views-field-user-picture  {
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border: 1px solid var(--gray-light2);

    flex: 1 1 5%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}



.node .view-user-profile-view .views-field-user-picture img {
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
    overflow: hidden;

}

.node .view-user-profile-view .views-field-fieldset {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--margin-m);

    flex: 1 1 60%;

    color: var(--black2);
    font-size: var(--fc-p);

    & .fieldset-01 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: var(--margin-s);
    }

    & .views-field-field-biography {
        color: var(--black2);
        font-size: var(--fc-p);
        font-weight: var(--fw-normal);
        text-wrap: balance;
    }

    & .views-field-name {
        color: var(--black3);
        font-size: var(--fc-p);
        font-weight: var(--fw-normal);

        .username {
            font-family: var(--ff-serif1);
            color: var(--black2);
            font-weight: var(--fw-bold);
        }
    }

    & .views-field-view-user {
        padding-right: var(--margin-l);
        justify-self: flex-end;
        margin-left: auto;

        &::after {
            content: "›";
            margin-left: var(--margin-s);
        }
    }
}

.node .view-user-profile-view .views-field-fieldset a {
    color: var(--blue2);
    text-decoration: none;
}


@media all and (width < 800px) {

    .node .view-user-profile-view .views-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: var(--margin-s);
    
        border: 1px solid var(--gray-light);
        border-radius: var(--br-m);
        padding: var(--margin-s);
    
        background-color: var(--white);
    }

    .node .view-user-profile-view .views-field-user-picture  {
        aspect-ratio: 1;
        border-radius: 50%;
        overflow: hidden;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center;
        border: 1px solid var(--gray-light2);
    
        flex: 1 1 5%;
    
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    
    
    
    .node .view-user-profile-view .views-field-user-picture img {
        aspect-ratio: 1;
        border-radius: 50%;
        object-fit: cover;
        object-position: center;
        height: 100%;
        width: 100%;
        overflow: hidden;
    
    }
    
    .node .view-user-profile-view .views-field-fieldset {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: var(--margin-m);
    
        flex: 1 1 80%;
    
        color: var(--black2);
        font-size: var(--fc-p);
    
        & .fieldset-01 {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            gap: var(--margin-s);
        }
    
        & .views-field-field-biography {
            color: var(--gray);
            font-size: var(--fc-small2);
            font-weight: var(--fw-normal);
            text-wrap: balance;
            display: none;
        }
    
        & .views-field-name {
            color: var(--black3);
            font-size: var(--fc-p);
            font-weight: var(--fw-normal);
    
            .username {
                font-family: var(--ff-serif1);
                color: var(--black2);
                font-weight: var(--fw-bold);
            }
        }
    
        & .views-field-view-user {
            padding-right: var(--margin-l);
            justify-self: flex-end;
            margin-left: auto;
            display: none;
    
            &::after {
                content: "›";
                margin-left: var(--margin-s);
            }
        }
    }
}


/* **** */

.block-field-blocknodearticlecreated {
    border-top: 1px solid var(--dark6);
    border-bottom: 1px solid var(--dark6);
    margin-top: var(--margin-m);
    padding-top: var(--margin-s);
    margin-bottom: var(--margin-m);
    padding-bottom: var(--margin-s);

    font-size: var(--fc-p);
    color: var(--dark3);
    text-align: center;
}

#block-andwrxyz02-andreaauthorinfo {
    border: 1px solid var(--dark4);
    border-radius: var(--br-s);
    max-width: 70ch;
    padding: var(--margin-l);
    margin-bottom: var(--margin-l);
    background: var(--grey2);
}

#block-andwrxyz02-andreaauthorinfo img {
    aspect-ratio: 1;
    border-radius: 100%;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    float: right;
    width: 120px;
    height: auto;
}

#block-andwrxyz02-bettersocialsharingbuttons {
    padding: var(--margin-l);
}

.social-sharing-buttons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: var(--margin-l) 0;    
}

.social-sharing-buttons a  {
    border-bottom: 0;
}