gallery.sass

.block-gallery
    .top
        @include grid(2, md)
        align-items: center
        .description
            width: col(7)

    figure
        display: block
        margin-bottom: 0
        > a,
        img,
        picture
            display: block

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

    &--grid
        .gallery
            @include grid(3, md)
            @include in-page-without-aside
                @include grid(5, md)

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

            figure
                max-width: 80%
                min-width: 80% // to check
                @include in-page-without-aside
                    min-width: 50%
                &: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
                @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)