persons.sass

/* TODO refacto widget */
.person
    position: relative
    display: flex
    flex-direction: column

    p
        margin-bottom: 0
        margin-top: 0

    .avatar
        margin-bottom: $spacing1
        order: -1
        width: px2rem(76)

    .name
        a
            @include stretched-link
            // @include link

    .name ~ p
        @extend .small

    @include media-breakpoint-down(md)
        display: block
        &::after
            content: ''
            clear: both
            display: table
        > div:first-of-type
            float: left
            margin-bottom: $spacing1
            max-width: calc(100% - 6rem)
        .avatar
            float: right


.persons
    @include grid(2, md)
    @include grid(3, lg)


.avatar
    @include aspect-ratio(50, 50, 'img')
    background-color: lightgray
    border-radius: 50%
    overflow: hidden
    img
        object-fit: cover