///
/// Big Picture by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Gallery */

	.gallery {
		@include vendor('display', 'flex');
		@include vendor('flex-wrap', 'wrap');
		width: 45em;
		max-width: 100%;
		margin: 0 auto _size(element-margin) auto;

		article {
			@include vendor('transition', (
				'transform 1s ease',
				'opacity 1s ease'
			));
			@include vendor('transform', 'translateX(0)');
			width: 50%;
			position: relative;
			opacity: 1.0;

			.image {
				margin: 0;
				display: block;
			}

			@for $i from 1 through 23 {
				&:nth-last-child(#{$i}n) {
					@include vendor('transition-delay', '#{(0.05s * $i)}');
				}

				&:nth-last-child(#{$i + 1}n) {
					@include vendor('transition-delay', '#{(0.05s * $i)}');
				}
			}
		}

		&.inactive {
			article {
				opacity: 0;

				&.from-left {
					@include vendor('transform', 'translateX(-14em)');
				}

				&.from-right {
					@include vendor('transform', 'translateX(14em)');
				}

				&.from-top {
					@include vendor('transform', 'translateY(-7em)');
				}

				&.from-bottom {
					@include vendor('transform', 'translateY(7em)');
				}
			}
		}

		@include breakpoint(xsmall) {
			@include vendor('flex-wrap', 'nowrap');
			@include vendor('flex-direction', 'column');

			article {
				width: 100%;
			}
		}
	}