posts.sass

.post
    @include article
    time
        color: $post-time-color
        display: inline-block
        vertical-align: middle
    .post-categories
        @include meta
        margin-top: $spacing-2
        margin-bottom: $spacing-2
        position: relative
        display: flex
        flex-wrap: wrap
        gap: 0 $spacing-2
        z-index: 2
        a
            @include link($color-accent)
        li
            margin: 0
    .post-author
        @include meta
        color: $color-text-alt

.posts__section,
.authors__term,
.posts_categories__term,
.persons__page
    .posts--list
        article
            border-bottom: 1px solid $color-border
            display: flex
            margin-bottom: $spacing-3
            padding-bottom: $spacing-3
            flex-direction: row
            [itemprop=headline] + p
                margin-top: $spacing-2
            @include media-breakpoint-up(desktop)
                @include grid
                margin-bottom: $spacing-5
                padding-bottom: $spacing-5
            .post-content
                grid-column: 4/13
                @include media-breakpoint-down(desktop)
                    flex: 1
                    margin-left: $spacing-2
                p:not(.title)
                    @include media-breakpoint-down(desktop)
                        display: none
            .media
                background: none
                margin: 0
                @include media-breakpoint-down(desktop)
                    width: 33.33333%
                @include media-breakpoint-up(desktop)
                    grid-column: 1/4
                &, img
                    aspect-ratio: auto
            @include media-breakpoint-up(desktop)
                .post-meta
                    position: absolute
                    right: 0
                    text-align: right
                    top: 0
                    time
                        font-size: $h5-size
                .post-content
                    [itemprop=headline],
                    > p
                        max-width: columns(6)
    .posts--grid
        @include grid(1)
        @include grid(2, desktop)
        @include grid($posts-grid-columns, xxl)
        .post
            @include post-time-author-flex
            .post-meta
                margin-top: $spacing-2

.posts__page
    .lead
        @include h3
        // Safe spacing if post is empty
    .document-content
        min-height: 350px
    &:not(.full-width)
        .post-sidebar
            @include sidebar

.post-categories
    @include list-reset
    margin: 0
    li
        display: inline-block
        vertical-align: middle
        margin-left: $spacing-1
        &:last-child
            &::after
                content: none

.post-infos
    margin-bottom: 0
    @include meta
    @include list-reset
    font-size: $table-body-size
    @include media-breakpoint-up(desktop)
        font-size: $table-body-size-desktop
    > li
        @include meta
        display: flex
        gap: $spacing-3
        justify-content: space-between
        padding-top: $spacing-2
        padding-bottom: $spacing-2
        border-color: $color-border
        &:not(:first-child)
            align-items: center
            border-top: 1px solid $color-border
        > span
            @include meta
            color: $color-text-alt
            padding-left: 0
            white-space: nowrap
            vertical-align: top
        > ul
            text-align: right
            flex: 1
        &.social-share
            align-items: center
    a
        @include link($color-accent)
        text-align: right
    .share
        display: block
        li
            display: inline-block
        a
            color: inherit
        li:last-child
            margin-right: -$spacing-2

.related
    margin-top: $spacing-3
    .posts
        @include grid(2, desktop)
        margin-bottom: 0
    .link
        @extend .link-more

.authors__term
    .blocks + .container
        margin-top: $spacing-5