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-nav
                @include grid(5, md)

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

            figure // TODO : affichage écrasé
                max-width: 80%
                min-width: 80% // to check
                @include in-page-without-nav
                    min-width: 50%
                // &:last-of-type
                //     max-width: 100%
                //     padding-right: 20%
                picture
                    height: 50vh
                    overflow: hidden // solution provisoire : j'ai créé un masque avec le picture
                    width: 100%
                    @media (min-height: 800px)
                        height: 680px
                        max-height: 100%
                    img
                        height: auto
                        width: 100%
                        @media (min-height: 800px)
                            height: 100%
                            max-width: unset
                            width: auto
                        // @include media-breakpoint-up(md)
                        //     height: 100%
                        //     max-height: 45vh
                        //     min-height: 45vh
                    
                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)