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: opacity .3s ease
            &:hover
                opacity: .7

        img
            height: auto
            width: 100%

        figcaption
            position: relative
            @include media-breakpoint-up(md)
                align-items: baseline
                display: flex
                justify-content: space-between
            p
                margin-bottom: 0
        .credit
            @extend .small

    &--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
        background: $block-gallery-carousel-background
        padding-bottom: $grid-gutter
        padding-top: $grid-gutter
        .block-gallery + &,
        .block-pages--cards + &
            margin-top: 0
        .container
            padding-right: 0
            .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
            &__slide
                flex-shrink: initial
                &:last-child
                    min-width: 100%
                    padding-right: 20%
                    img
                        width: 100%
            figure 
                margin-right: $grid-gutter
                picture
                    img
                        max-height: 70vh
                        width: auto
                        height: auto
                        max-width: calc(100vw - #{$grid-gutter-sm} * 2)
                @include media-breakpoint-up(md)
                    picture
                        img
                            max-height: 70vh
                            width: auto
                            height: auto
                            max-width: 50vw
                            @include in-page-without-sidebar
                                height: 70vh
                                max-width: none
                    figcaption
                        display: flex
                        justify-content: space-between

            &__arrows
                margin-left: -13px
                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