pages.sass

.block-pages
    .top
        @include top-flex
        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
            .block-title
                @include h5
        .description
            @include h2
        article
            margin-top: $spacing1

    @include in-page-without-sidebar
        .top
            a
                @include icon(arrow, after, true)
                @include hover-translate-icon
            .description
                @include h2

    &--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
        *:not(.heading) + &
            margin-top: 0
        .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 in-page-without-sidebar
            .block-title
                a
                    @include stretched-link(before)
            .block-content
                @include grid
                // grid-column-gap: $spacing1
                // grid-row-gap: $spacing1
                .top
                    display: block
                    grid-column: 1 / 8
                    margin-bottom: 0
                    .block-title
                        width: auto
                .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

    &--alternate
        .grid
            article .media img
                aspect-ratio: unset
        @include media-breakpoint-up(desktop)
            article
                width: col(4, 8)
                &:not(:first-child)
                    margin-top: -5%
                &:nth-child(even)
                    margin-left: auto
                &.image-portrait
                    + .image-portrait
                        margin-top: -30%
                    + .image-square,
                    + .image-landscape
                        margin-top: -15%
        @include in-page-without-sidebar
            .top
                .description
                    @include body-text
            .grid
                width: col(10)
                margin-left: auto
                margin-right: auto
                article
                    width: col(4, 10)