persons.sass

.person
    @include article

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

    .name
        margin-bottom: px2rem(5)
        & ~ p
            @extend .small

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


section.persons,
div.persons
    @include grid(1)
    @include grid(2, md)
    @include grid(3, lg)
    @include grid(4, xl)
    @include grid(5, xxl)

.persons__section
    .lead
        padding-top: $spacing2
        @include media-breakpoint-up(md)
            width: col(7)
ol.persons
    @include list-reset
    > li
        border-bottom: 1px solid $main-border-color
        padding-bottom: $spacing1
        padding-top: $spacing1
        position: relative
        p
            margin-bottom: 0
        a
            @include stretched-link

        @include media-breakpoint-up(md)
            align-items: baseline
            display: flex
            > p
                width: col(5)
                & + p
                    width: col(7)

.avatar
    @include aspect-ratio(50, 'img')
    background-color: $persons-avatar-background-color
    border-radius: 50%
    margin-bottom: $spacing2
    overflow: hidden
    position: relative
    width: 100%
    &::before
        content: ""
        display: block
        padding-top: 100%

    picture,
    img
        @include inset(0)
        height: 100%
        width: 100%
        position: absolute

    img
        object-fit: cover

/* TODO revoir ce nom */
.taxonomies
    @include list-reset
    margin-bottom: $spacing3
    @include media-breakpoint-down(md)
        flex-direction: column
    @include media-breakpoint-up(md)
        text-align: right
    li
        @include media-breakpoint-down(md)
            &:not(last-child)
                margin-bottom: $spacing1
        @include media-breakpoint-up(md)
            display: inline-block
            &:not(:last-child)
                margin-right: $spacing1
    a
        @extend .link-more

@include media-breakpoint-up(lg)
    .persons__page
        main
            .container
                margin-top: $spacing2
        .informations
            @include grid
            margin-bottom: $spacing2
            > div
                &:first-of-type
                    grid-column: 1 / 9
                &:nth-of-type(2)
                    grid-column: 9 / 13

            .lead + div
                margin-top: $spacing2

        .posts 
            @include grid(3)