@widthLandscapeDesktop: calc((100vw / 2.25) - 0.415vw);
@widthPortraitDesktop: calc((@widthLandscapeDesktop / 1.5) / 1.5);

@widthLandscapeMobile: calc((100vw / 1.1) - 0.415vw);
@widthPortraitMobile: calc((@widthLandscapeMobile / 1.5) / 1.5);

@ratioLandscape: calc(3 / 2);
@ratioPortrait: calc(2 / 3);

.gallery {
    display: flex;
    flex-flow: column;
    width: 100%;
    margin-left: auto;
    margin-right: 0;
}

.gallery__item {
    flex-shrink: 0;
    position: relative;
    display: block;
    width: @widthLandscapeDesktop;
    @media (max-width: @responsiveMobileXL) {
        width: @widthLandscapeMobile;
    }
    margin: 0.5vh auto 0 auto;
    overflow: hidden;

    &::before {
        content: '';
        display: block;
        width: 100%;
    }
    &:first-child,
    &:last-child {
        &:after {
            content: '';
            position: absolute;
            top: 0;
            width: 33%;
            height: 100%;
            z-index: 1;
        }
    }

    &:first-child {  margin-top: 0 }

    &.is-landscape {
        &::before {
            padding-top: calc(100% / @ratioLandscape);
        }
    }
    &.is-portrait {
        &::before {
            padding-top: calc(100% / @ratioPortrait);
        }
    }
}

.gallery__figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.gallery__img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    max-width: inherit;
    height: 100%;
    transform: translate(-50%, -50%);
}

/* Overload inline */
.gallery--inline {
    flex-flow: row nowrap;
    overflow: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar { display: none }
}

.gallery--inline .gallery__item {
    margin: 0 0 0 0.5vw;
    @media (max-width: @responsiveTablet) {
        margin-left: 2.5vw;
    }

    &:first-child {
        margin-left: 0;
        &:after {
            left: 0;
            background: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0) 100%);
        }
    }
    &:last-child {
        &:after {
            left: auto;
            right: 0;
            background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.3) 100%);
        }
    }

    &.is-portrait {
        width: @widthPortraitDesktop;
        @media (max-width: @responsiveMobileXL) {
            width: @widthPortraitMobile;
        }
    }
}

/* Touch device */
.touch {
    .gallery--inline {
        scroll-snap-type: x proximity;

        .gallery__item { scroll-snap-align: center }
    }
}