gallery.sass

.block-gallery
    figure
        display: block
        margin-bottom: 0
        > a,
        img,
        picture
            display: block
        > 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

    @include in-page-without-sidebar
        .top
            @include grid(2, desktop)
            align-items: baseline

    &--grid
        .gallery
            align-items: baseline
            @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
            &--with-text
                @include in-page-without-sidebar
                    @include grid(4, desktop, $spacing0)
                figure
                    display: grid
                    grid-template-columns: subgrid
                    gap: space(3)
                    figcaption
                        &::after
                            content: ' '
    &--carousel
        overflow: hidden
        position: relative
        z-index: 0
        @include in-page-without-sidebar
            background: $block-gallery-carousel-background
            padding-bottom: $grid-gutter
            padding-top: $grid-gutter
        .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
            @include in-page-with-sidebar
                &.is-moving
                    .splide__slide.is-active
                        opacity: 0.1
            &__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
                    padding-right: 20%
            figure
                margin-right: half($grid-gutter)
                @include media-breakpoint-down(desktop)
                    display: flex
                    flex-direction: column
                    justify-content: end
                picture
                    img
                        // FIXME Arnaud: I would like images at constant height, can't manage to get it right.
                        max-height: $block-gallery-carousel-max-height
                        width: auto
                        height: auto
                        max-width: calc(100vw - #{$grid-gutter-sm} * 2)
                        @include media-breakpoint-up(desktop)
                            height: $block-gallery-carousel-max-height
                            width: auto
                            max-width: none
                figcaption
                    margin-top: space(3)
                    > * + *
                        margin-top: space(2)

            &__arrows
                margin-left: px2rem(-18)
                order: 2
                @media (min-height: 800px)
                    padding-top: space(10)
            &__arrow
                &--prev,
                &--next
                    @include button-reset
                    @include icon(arrow-left, before)
                    height: space(12)
                    padding: 0
                    position: static
                    width: space(12)
                    svg
                        display: none
                &--next
                    @include icon(arrow-right, before)

        @include in-page-without-sidebar
            .splide
                figure
                    margin-left: $grid-gutter
                    margin-right: half(-$grid-gutter)
                &__slide
                    &:first-child
                        margin-left: $grid-gutter
                &__track
                    margin-left: -$grid-gutter