pages.sass

.block-pages
    .top
        a
            text-decoration: none
    .grid, .cards, .list
        article
            position: relative
            display: flex
            flex-direction: column
            .media
                @include handle-svg-fit
                order: -1
                margin-bottom: $spacing1
                &:empty
                    display: none
                img
                    display: block
                    aspect-ratio: 16/9
                    object-fit: cover
                    width: 100%
        .page-title
            @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
        .top
            @include top-flex
        .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
        .top
            @include top-flex
        .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
            &.title-only
                li
                    line-height: 1
            li
                display: block
                + 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)
                article
                    .page-title
                        @include h3
                        a
                            @include icon(arrow, after, true)
                            @include hover-translate-icon(after)
                            text-decoration-color: transparent
        @include media-breakpoint-down(desktop)
            .top
                margin-bottom: $spacing0
            ul
                margin-top: $spacing1
        @include media-breakpoint-up(desktop)
            ul:not(.title-only)
                li + li
                    margin-top: $grid-gutter
                article
                    gap: $grid-gutter
                    flex-direction: row
                    .media
                        flex-shrink: 0
                        margin-bottom: 0
        @include in-page-with-sidebar
            .block-content
                .top
                    margin-bottom: $spacing1
                    .description
                        margin-bottom: $spacing2
                ul.title-only
                    @include grid(2, desktop)
                    grid-row-gap: $spacing0 !important
                    grid-column-gap: half($grid-gutter) !important
                    li
                        margin-top: 0
                        a
                            @include meta
                article
                    gap: half($grid-gutter)
                    .media
                        width: calc(#{col(2, 8)} + #{half($grid-gutter)})
                    .page-content
                        width: col(6, 8)

        @include in-page-without-sidebar
            .block-title
                a
                    @include stretched-link(before)
            .top
                .description
                    p
                        @include h2
            article
                .media
                    width: col(4)
                .page-content
                    width: col(8)
            &:not(.with-description)
                ul.title-only
                    @include grid(4, desktop, space(2))
                    grid-column: 1 / 13
                    li
                        margin-top: 0
                ul:not(.title-only)
                    @include grid(2, desktop)
                    li + li
                        margin-top: 0
            &.with-description
                .block-content
                    @include grid(12, desktop, $spacing2)
                    row-gap: half($grid-gutter)
                    .top
                        align-items: initial
                        grid-column: 1 / 8
                        margin-bottom: 0
                        display: grid
                        grid-template-rows: subgrid
                        grid-row: span 2
                        .block-title
                            width: auto
                        .description
                            @include body-text
                            margin-top: 0
                    // If page description
                    .top + ul
                        grid-column: 9 / 13
                        grid-row: 2
                        display: block
                        li + li
                            margin-top: $spacing0
                            article
                                margin-top: $spacing3
                &.with-images
                    .top
                        grid-column: 1 / 7
                    .top + ul
                        grid-column: 7 / 13


    &--alternate
        .top
            @include top-flex
        .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)
    &--large
        .top
            @include top-flex
        .page
            position: relative
            + .page
                margin-top: $spacing3
            .more
                @include icon(arrow, after, true)
                @include hover-translate-icon(after)
            &:hover .more:after
                transform: translateX(#{px2rem(10)})
            &-title a    
                @include stretched-link
            .media
                img
                    aspect-ratio: 1
        @include media-breakpoint-up(desktop)
            .page
                flex-direction: row
                gap: $grid-gutter

        @include in-page-with-sidebar
            .page
                &-title
                    @include h2
                    margin-bottom: space(4)
                &-content
                    flex: 1
                .media 
                    flex: 1
        @include in-page-without-sidebar
            .top
                .description
                    @include body-text
            .page
                align-items: center
                &-title
                    @include lead
                    margin-bottom: space(4)
                &-content
                    width: col(5)
                .media 
                    width: col(6)