posts.sass

.block-posts
    .top
        margin-bottom: $spacing2
        a
            @include hover-translate-icon
            @include icon(arrow-right, after, true)
            align-items: flex-end
            display: flex
            text-decoration: none
    .posts
        @include grid(1)
        @include grid($block-posts-grid-columns, desktop)
    article
        h3
            a
                @include stretched-link
                text-decoration: none
        .post-content
            > * + * 
                margin-top: $spacing0
            .media
                margin-top: 0
        @include post-time-author-flex

    &--grid
        @include media-breakpoint-down(desktop)
            article + article
                margin-top: $spacing3
        @include in-page-with-sidebar
            .grid
                @include grid(2, desktop, $grid-gutter, half($grid-gutter))
        @include media-breakpoint-up(desktop)
            @include in-page-without-sidebar
                .grid
                    @include grid($block-posts-grid-columns)
                    .media picture img
                        width: 100%
    &--list
        article
            border-bottom: 1px solid $color-border
            .media
                background: none
                margin: 0
                &, img
                    aspect-ratio: auto
        @include media-breakpoint-down(desktop)
            article
                position: relative
                padding-bottom: half($spacing3)
                + article
                    margin-top: half($spacing3)
                .post-content
                    display: flex
                    flex-direction: column
                    padding-top: $spacing0
                    h3
                        margin-bottom: 0
                    .post-categories
                        margin-bottom: 0
                    p[itemprop="articleBody"]
                        margin-top: half($spacing0)
                .media
                    order: -1
                    max-width: 33%

        @include in-page-with-sidebar
            article
                padding-bottom: $spacing1
                + article
                    margin-top: $spacing1
                .media
                    width: calc(#{col(2, 8)} + #{half($grid-gutter)})
                .post-content
                    width: col(6, 8)
                    margin-left: half($grid-gutter)

        @include media-breakpoint-up(desktop)
            article
                display: flex
                flex-direction: row

            @include in-page-without-sidebar
                 article
                    padding-bottom: $spacing3
                    border-bottom: 1px solid $color-border
                    position: relative
                    .media
                        width: col(3)
                    .post-content
                        width: col(6)
                        margin-left: $grid-gutter
                    + article
                        margin-top: $spacing3
                    .post-meta
                        position: absolute
                        right: 0
                        top: 0
                        margin-top: 0.3em
    &--highlight
        .highlight-post
            h3
                margin-bottom: $spacing0
            .media
                margin-bottom: $spacing0
                background: none
        .list
            margin-top: half($spacing3)
            border-top: 1px solid $color-border
            article
                border-bottom: 1px solid $color-border
                position: relative
                padding-bottom: half($spacing3)
                margin-top: half($spacing3)
        article
            > * + * 
                margin-top: $spacing0
            .media
                margin-top: 0

        @include in-page-with-sidebar
            .highlight-post
                .post
                    flex-direction: row
                    .media
                        width: calc(#{col(3, 8)} + #{half($grid-gutter)})
                        margin-bottom: 0
                    .post-content
                        width: col(5, 8)
                        margin-left: half($grid-gutter)
            .list
                article
                    @include grid(8, desktop, 0, 0)
                    h3
                        grid-column: 1 / 7
                    .post-categories
                        grid-column: 1 / 7
                    .post-meta
                        grid-row: 1
                        grid-column: 7 / 9
                        text-align: right
                        order: 2
                        display: block
                        margin-top: 0
                        .post-author p::before
                            content: ''
                    p[itemprop="articleBody"]
                        grid-column: 1 / 7
                        order: 3
        
        @include media-breakpoint-down(desktop)
            .list
                border-top: 1px solid $color-border
                p[itemprop="articleBody"]
                    margin-top: 0

        @include media-breakpoint-up(desktop)
            .highlight
                h3
                    @include h2
            .list
                article
                    h3
                        @include h4
            @include in-page-without-sidebar
                .highlight
                    @include grid(2)
                .list
                    border-top: 0
                    margin-top: 0
                    article:first-child
                        margin-top: 0
    &--alternate .alternate
        @include media-breakpoint-up(desktop)
            .post
                width: col(3,8)
                &.right
                    margin-left: auto
                &.portrait
                    + .portrait
                        margin-top: -30%
                    + .square,
                    + .landscape
                        margin-top: -15%
                    + .post:not(.portrait, .square, .landscape)
                        margin-top: -5%
            @include in-page-without-sidebar
                width: col(10)
                margin-left: auto
                margin-right: auto
                .post
                    width: col(4, 10)
        @include media-breakpoint-down(desktop)
            .post 
                .post-meta
                    margin-top: half($spacing0)
                .media
                    margin-bottom: $spacing0
                + .post
                    margin-top: $spacing3
        .post .media img
            aspect-ratio: unset