pages.sass

.block-pages
    margin-top: $spacing4
    .pages
        @include grid(2, md)
    .main-page
        .title
            a
                @include icon("arrow-right", before)
                @include hover-translate-icon(before, 3)
                text-decoration-color: transparent
                display: block
                &::before
                    content: none
    .pages
        .page
            .title
                a
                    @include icon("arrow-right", before)
                    @include hover-translate-icon(before, 3)
                    text-decoration-color: transparent
    &--grid
        .main-page + .pages
            margin-top: $spacing2
        .pages
            .page
                .title
                    a
                        @extend .h3
                p
                    @extend .small
                    margin-top: calc(#{$spacing1} / 2)
        @include in-page-without-sidebar
            .pages
                @include grid(3, xl)

    &--list
        .block-content
            @include grid(2, lg)
            align-items: start

        .main-page
            .title
                @extend .h5
                @include media-breakpoint-up(lg)
                    margin-bottom: 0
            p
                @extend .h2
                @include media-breakpoint-up(lg)
                    margin-top: $spacing1

        .pages
            display: block
            margin-top: $spacing2
            @include media-breakpoint-up(lg)
                margin-top: calc(#{$spacing2}
            .page
                .title
                    margin-top: calc(#{$spacing1} / 2)
                    a
                        @extend .meta
                        @include hover-translate-icon(before, 3)
                        text-decoration-color: transparent
                        text-transform: none // FIXME Arnaud
                        &:hover
                            text-decoration-color: black
        .page
            > div
                padding: 0

    &--cards
        background-color: $block-pages-card-background
        padding-bottom: $grid-gutter
        padding-top: $grid-gutter
        .block-gallery + &,
        .block-pages--cards + &
            margin-top: 0
        .main-page
            a
                @include icon("arrow-right", after)
                @include hover-translate-icon(after, 3)
                @include stretched-link(before)
                &::after
                    font-size: px2rem(14)
                    position: relative
                    margin-left: $spacing0

        .main-page + .pages
            margin-top: $spacing2
        .pages
            @include grid(3, md)
            @include in-page-with-sidebar
                @include grid(2, md)
            .page
                aspect-ratio: 0.8
                background-color: $block-pages-card-page-background
                transition: background 0.3s, color 0.3s
                &,
                a
                    color: $block-pages-card-page-color
                .title + p
                    margin-top: $spacing0
                .media
                    margin-bottom: 0
                .more
                    @include icon("arrow-right", after)
                    @include link($block-pages-card-page-color)
                    // @extend .small
                    font-size: px2rem(16)
                    position: relative
                    text-decoration-color: $block-pages-card-page-color
                    text-decoration-line: underline
                    text-decoration-thickness: 1px
                    text-underline-offset: 3px
                    margin-top: auto
                    &::after
                        font-size: $small-size
                        opacity: 0
                        position: absolute
                        right: 0
                        transform: translateX(-20px)
                        transition: 0.55s $arrow-ease-transition
                &:hover
                    .more:after
                        opacity: 1
                        transform: translateX(0)
                a,
                .more
                    transition: text-decoration-color .3s ease, color .3s ease
                > div:first-child
                    display: flex
                    flex: auto
                    flex-direction: column
                .title
                    a
                        text-decoration: none
                    + p:not(.more)
                        margin-bottom: 1rem
                &: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
                > div:first-of-type
                    padding: $spacing1
        .page
            .title
                a::before
                    content: none