gallery.sass

.block-gallery
    .top
        @include grid(2, md)
        .description
            width: col(7)
            // @extend .col-md-7
            // @include media-breakpoint-down(md)
            //     margin-top: 2rem

    figure
        margin-bottom: 0
        > a,
        > picture
            // @extend .figure-img
            display: block

        > a
            transition: opacity .3s ease
            &:hover
                opacity: .7

        picture
            display: block

        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
            font-size: $small-font-size

    &--grid
        .gallery
            @include grid(3)

    &--carousel
        .container
            padding-right: 0
        .splide
            display: flex
            flex-direction: column
            &__slide
                flex-shrink: initial

            figure
                max-width: 80%
                &:last-of-type
                    max-width: 100%
                    padding-right: 20%
                img
                    height: 50vw
                    width: auto
                    @include media-breakpoint-up(md)
                        height: 100%
                        max-height: 45vh
                        min-height: 400px
                    @media (min-height: 800px)
                        height: 680px
                        max-height: 100%
                p
                    @media (min-height: 800px)
                        font-size: px2rem(16)
            &__arrows
                margin-left: -13px
                order: 2
                // padding-top: $grid-gutter-width
                @media (min-height: 800px)
                    padding-top: px2rem(40)
            &__arrow
                &--prev,
                &--next
                    height: 48px
                    padding: 0
                    position: static
                    width: 48px