@margin: calc(((100vw - @contentWidth) / 2) - @contentPadding);
@margin4K: calc(25vw - @contentPadding);

.mozaique__item {
    justify-content: space-between;
	transform-origin: center center;
	transition: transform 0.2s;

    .mozaique--inline & {
        padding: 0 1.3021vw;

        &:first-child {
			margin-left: @margin;

			@media (min-width: @responsiveDesktopXL) {
				margin-left: @margin4K;
			}
		}
        &:last-child {
			margin-right: @margin;
			
			@media (min-width: @responsiveDesktopXL) {
				margin-right: @margin4K;
			}
		}

		.touch & { scroll-snap-align: center }
    }
}

.mozaique__figure {
	position: relative;
	width: 42vh;
	height: auto;
	
	&:before {
		content: '';
		display: block;
		padding-top: 100%;
	}
}

.mozaique__picture {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	box-shadow: 0 0 @50px rgba(0,0,0,0.33);
	border-radius: @10px;

	transform: translate3d(-50%, -50%, 0);

	overflow: hidden;


	&.is-portrait {
		height: 100%;

		&.is-3-2 { width: calc(100% / (3 / 2)) }
	}
	&.is-landscape {
		width: 100%;

		&.is-3-2 { height: calc(100% / (3 / 2)) }
	}
	&:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
	}

	.no-touch & {
		transition: border-radius 0.5s;

		&:after {
			background: rgba(0,0,0,0.25);
			transition: background 1s;
		}
	
		&:hover {
			border-radius: 4px;

			.mozaique__img { width: 100% }
			&:after { background: rgba(0,0,0,0) }
		}
	}
}

.mozaique__img {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 103%;
	max-width: inherit;
	height: auto;
	transform: translate3d(-50%, -50%, 0);
	transition: width 1s;

	.portrait & {
		width: 100%;
	}
}

.portrait {
	.mozaique__figure { width: 45vw }

	.mozaique--inline {
		.mozaique__item {
			&:first-child { margin-left: 20px }
			&:last-child { margin-right: 20px }
		}
		@media (max-width: @responsiveMobileXL) {
			.mozaique__figure { width: 80vw }
		}
	}
}