gallery.sass

.block-gallery
    @include in-page-without-sidebar
        .top
            @include grid(2, md)
            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
            position: relative
            p
                margin-bottom: 0
        .credit
            *
                @extend .meta

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

    &--carousel
        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: calc(#{$grid-gutter-sm} / 2)
                @include media-breakpoint-up(md)
                    padding-right: calc(#{$grid-gutter} / 2)
        .splide
            display: flex
            flex-direction: column
            &__track
                margin-right: -calc(#{$grid-gutter-sm} / 2)
                .splide__slide
                    transition: opacity  .3s ease
                    &[aria-hidden=true]
                        opacity: 0.2
                @include media-breakpoint-up(md)
                    margin-right: -calc(#{$grid-gutter} / 2)
            &__slide
                flex-shrink: initial
                &:last-child
                    min-width: 100%
                    padding-right: 20%
                    img
                        max-width: 100%
            figure 
                margin-right: calc(#{$grid-gutter} / 2)
                picture
                    img
                        max-height: 70vh
                        width: auto
                        height: auto
                        max-width: calc(100vw - #{$grid-gutter-sm} * 2)
                @include media-breakpoint-up(md)
                    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
            .splide
                &__slide
                    &:first-child
                        margin-left: $grid-gutter
                &__track
                    margin-left: -$grid-gutter