posts.sass

.post
    @include article($post-media-background)
    time
        color: $post-time-color

.posts__section,
.authors__term,
.categories__term
    @if $posts-layout-list
        .posts 
            @include grid(1)
            grid-gap: 0
            > div 
                border-bottom: 1px solid $color-border
                margin-bottom: $spacing3
                padding-bottom: $spacing3
                .post
                    display: flex
                    flex-direction: row
                    @include media-breakpoint-up(md)
                        @include grid
                    div:not(.media)
                        grid-column: 4/13
                        @include media-breakpoint-down(md)
                            flex: 1
                            margin-left: $spacing0
                        p:not(.title)
                            @include media-breakpoint-down(md)
                                display: none
                    .media
                        background: none
                        margin: 0
                        @include media-breakpoint-down(md)
                            width: 33.33333%
                        @include media-breakpoint-up(md)
                            grid-column: 1/4
                    @include media-breakpoint-up(md)
                        time 
                            font-size: $h5-size
                            position: absolute
                            right: 0
                            top: 0
                        div:not(.media)
                            h1,
                            p,
                            a
                                max-width: col(6, 9)

    @else 
        .posts
            @include grid(1)
            @include grid(2, md)
            @include grid(3, xl)

.posts__page
    @include media-breakpoint-down(md)
        .document-content
            display: flex
            flex-direction: column
            aside
                order: 2
                padding: 0 half($grid-gutter-sm)
            .blocks-pagination
                order: 3
    @include media-breakpoint-up(md)
        aside
            @include container-margin-left
            margin-top: 0
            top: 0
            left: 0
            height: 100%
            position: absolute
            width: col-outside-container(4)
            .post-infos
                @include sticky($spacing1)

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

.post-infos
    margin-bottom: 0
    &, li
        @include small
    ul
        @include list-reset
    caption
        @include visually-hidden
        position: relative !important // Fix safari iOS border issue
    th
        @include h4
        padding-left: 0
        white-space: nowrap
        vertical-align: top
    tr
        @include meta
        border-color: $color-border
        a
            color: $color-accent
            &:not(:hover)
                text-decoration-color: transparent
    th, td
        padding: 1rem 0
    .multiple

    td:last-of-type
        padding-right: 0
        text-align: right
    tr:first-of-type
        border-top: 0
        th, td
            padding-top: 0
    tr:last-of-type
        border-bottom: 0
    .share
        justify-content: flex-end
        a
            color: inherit
        li:last-child
            margin-right: -$spacing0

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