pages.sass

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

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

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

    @include in-page-without-sidebar
        @include media-breakpoint-up(desktop)
            .top
                @include grid
                h2, h3
                    grid-column: 1 / 5
                    a
                        text-decoration: none
                        @include icon("arrow-right", "after", px2rem(16), true)
            .description
                @include h2
                grid-column: 5 / 13
                margin-top: -0.25em
                font-style: $h2-size-desktop

    &--grid
        .grid
            a
                @include icon("arrow-right", "after", px2rem(16), true)
                @include hover-translate-icon(after, 3)
        @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
            .more
                @include arrow-right-hover
                @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 meta
                    text-decoration: none
                    @include icon("arrow-right", before, px2rem(10))
                        padding-right: $spacing0
        @include media-breakpoint-down(desktop)
            .top
                margin-bottom: $spacing0
            ul
                margin-top: $spacing1
        @include media-breakpoint-up(desktop)
            @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 in-page-without-sidebar
                .block-content
                    @include grid
                    grid-row-gap: $spacing1
                    .top
                        display: block
                        grid-column: 1 / 8
                        margin-bottom: 0
                    .top + .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