pages.sass

.block-pages
    .top
        a
            text-decoration: none
    .grid, .cards
        article
            position: relative
            display: flex
            flex-direction: column
            .media
                @include handle-svg-fit
                order: -1
                margin-bottom: $spacing1
                img
                    display: block
                    aspect-ratio: 16/9
                    object-fit: cover
                    width: 100%
        h3
            @include h3
            a
                @include stretched-link(before)
                text-decoration: none
            + p
                margin-top: $spacing0

    @include media-breakpoint-up(desktop)
        .top
            margin-bottom: $spacing2

    @include media-breakpoint-down(desktop)
        .top
            h2
                @include h5
        .description
            @include h2
        article
            margin-top: $spacing1

    @include in-page-without-sidebar
        @include media-breakpoint-up(desktop)
            .top
                @include grid
                h2
                    grid-column: 1 / 5
                    a
                        @include icon(arrow, after, true)
                        @include hover-translate-icon
                        align-items: flex-end
                        display: flex
                        text-decoration: none
            .description
                @include h2
                grid-column: 5 / 13
                margin-top: -0.25em
                font-style: $h2-size-desktop

    &--grid
        .grid
            a
                @include icon(arrow, after, true)
                @include hover-translate-icon(after)
        @include media-breakpoint-up(desktop)
            .grid
                @include grid(2, desktop)
                @include in-page-with-sidebar
                    grid-column-gap: half($grid-gutter) !important
                @include in-page-without-sidebar
                    @include grid(3, desktop)

    &--cards
        background-color: $block-pages-card-background
        padding-bottom: $grid-gutter
        padding-top: $grid-gutter
        .blocks &:last-of-type
            margin-bottom: 0
        .cards
            @include grid(2, desktop)
            @include in-page-with-sidebar
                grid-gap: half($grid-gutter) !important
            @include in-page-without-sidebar
                @include grid(3, desktop)
        // TODO: move this //
        .block-gallery + &,
        .block-pages--cards + &
            margin-top: 0
        // ----------------- //
        .card
            padding: $spacing1
            background-color: $block-pages-card-page-background
            transition: background 0.3s, color 0.3s
            display: flex
            flex: auto
            flex-direction: column
            min-height: 320px
            &,
            a
                color: $block-pages-card-page-color
            .media
                margin-bottom: 0
                margin-left: -$spacing1
                margin-right: -$spacing1
                margin-top: -$spacing1
                img
                    min-width: 100%
            .more
                @include arrow-right-hover
                @include icon-block(arrow-right, after)
                @include link($block-pages-card-page-color)
                @include text-underline
                position: relative
                margin-top: auto
                padding-top: $spacing1
                display: flex
                justify-content: space-between
                align-items: center
            &:hover
                .more:after
                    opacity: 1
                    transform: translateX(0)
            a,
            .more
                transition: text-decoration-color .3s ease, color .3s ease
            &:hover
                background-color: $block-pages-card-page-background-hover
                &, a, .more
                    color: $block-pages-card-page-color-hover
                .more
                    text-decoration-color: $block-pages-card-page-color-hover
    &--list
        ul
            @include list-reset
            li
                display: block
                line-height: 1
                + li
                    margin-top: $spacing0
                a
                    @include icon(arrow, before, true)
                        padding-right: $spacing0
                    @include hover-translate-icon(before, 5)
                    @include link
                    text-decoration-color: rgba(0,0,0,0)
        @include media-breakpoint-down(desktop)
            .top
                margin-bottom: $spacing0
            ul
                margin-top: $spacing1
        @include in-page-with-sidebar
            .block-content
                .top
                    margin-bottom: $spacing1
                .description
                    margin-bottom: $spacing1
                ul
                    @include grid(2, desktop)
                    grid-row-gap: $spacing0 !important
                    grid-column-gap: half($grid-gutter) !important
                    li
                        margin-top: 0
        @include media-breakpoint-up(desktop)
            @include in-page-without-sidebar
                h2
                    a
                        @include stretched-link(before)
                .block-content
                    @include grid
                    grid-row-gap: $spacing1
                    .top
                        display: block
                        grid-column: 1 / 8
                        margin-bottom: 0
                    .top:not(.hidden) + .description
                        grid-column: 1 / 8
                        grid-row: 2 / 3
                    // Default behavior (without page description)
                    ul
                        @include grid(4, desktop)
                        grid-column: 1 / 13
                        li
                            margin-top: 0
                    // If page description
                    .description + ul
                        grid-column: 9 / 13
                        grid-row: 2 / 3
                        display: block
                        li + li
                            margin-top: $spacing0