gallery.sass

.block-gallery
    @include in-page-without-sidebar
        .top
            @include grid(2, desktop)
            align-items: baseline
    figure
        display: block
        margin-bottom: 0
        > a,
        img,
        picture
            display: block
            margin-bottom: $spacing0
        > a
            transition: filter .3s ease
            &:hover
                // if low opacity means not selected, selected needs to be darker
                filter: brightness(95%)

        img
            height: auto
            width: 100%

        figcaption
            @include small
            position: relative
            p
                margin-bottom: 0
        .credit
            *
                @include meta

    &--grid
        .gallery
            align-items: start
            @include in-page-with-sidebar
                @include grid(3, desktop, half($grid-gutter), half($grid-gutter))
            @include in-page-without-sidebar
                @include grid(4, desktop)
            @include media-breakpoint-down(desktop)
                @include grid(2)
                grid-gap: half($grid-gutter-sm) !important
            figure
                &:after
                    content: ' ' // This is used to allow align baseline without figcaption

    &--carousel
        overflow: hidden
        padding-bottom: $grid-gutter
        padding-top: $grid-gutter
        @include in-page-without-sidebar
            background: $block-gallery-carousel-background
        .block-gallery + &,
        .block-pages--cards + &
            margin-top: 0
        .container
            .top
                padding-right: half($grid-gutter-sm)
                @include media-breakpoint-up(desktop)
                    padding-right: half($grid-gutter)
        .splide
            display: flex
            flex-direction: column
            &__track
                overflow: visible
                margin-right: half(-$grid-gutter-sm)
                @include in-page-with-sidebar
                    .splide__slide
                        transition: opacity  .3s ease
                        opacity: 0.1
                        &.is-next
                            opacity: 0.6
                        &.is-active
                            opacity: 1
                @include media-breakpoint-up(desktop)
                    margin-right: half(-$grid-gutter)
            &__slide
                flex-shrink: initial
                &:last-child
                    min-width: 100%
                    padding-right: 20%
                    img
                        max-width: 100%
            figure
                margin-right: half($grid-gutter)
                picture
                    img
                        // FIXME Arnaud: I would like images at constant height, can't manage to get it right.
                        max-height: 70vh
                        width: auto
                        height: auto
                        max-width: calc(100vw - #{$grid-gutter-sm} * 2)
                @include media-breakpoint-up(desktop)
                    picture
                        img
                            height: 70vh
                            width: auto
                            height: auto
                            max-width: none
                            @include in-page-without-sidebar
                                height: 70vh
                                max-width: none

            &__arrows
                margin-left: -18px
                order: 2
                @media (min-height: 800px)
                    padding-top: px2rem(40)
            &__arrow
                &--prev,
                &--next
                    @include button-reset
                    @include icon(arrow-left, before)
                    height: 48px
                    padding: 0
                    position: static
                    width: 48px
                    svg
                        display: none
                &--next
                    @include icon(arrow-right, before)
        @include in-page-without-sidebar
            @include media-breakpoint-up(desktop)
                .splide
                    figure
                        margin-left: $grid-gutter
                        margin-right: half(-$grid-gutter)
            .splide
                &__slide
                    &:first-child
                        margin-left: $grid-gutter
                &__track
                    margin-left: -$grid-gutter