/* FILE: content/wp/_gallery.scss */

// Legacy gallery styles.
.gallery {
	$gutter: .5em;

	display: flex;
	flex-wrap: wrap;
	margin: $gutter / -2;

	&:not(:last-child) {
		margin-bottom: 1.618em;
	}

	&-item {
		flex: auto;
		display: inline-block;
		position: relative;
		width: calc( 100% - #{ $gutter } );
		margin: $gutter / 2;
		text-align: center;
		vertical-align: top;

		.gallery-columns-2 &,
		.gallery-columns-3 &,
		.gallery-columns-4 &,
		.gallery-columns-5 &,
		.gallery-columns-6 &,
		.gallery-columns-7 &,
		.gallery-columns-8 &,
		.gallery-columns-9 & {
			width: calc( #{ percentage( 1 / 2 ) } - #{ $gutter } );
		}

		@include media( map_get( $breakpoint, 's' ) ) {

			.gallery-columns-3 & {
				width: calc( #{ percentage( 1 / 3 ) } - #{ $gutter } );
			}

			.gallery-columns-4 &,
			.gallery-columns-5 &,
			.gallery-columns-6 &,
			.gallery-columns-7 &,
			.gallery-columns-8 &,
			.gallery-columns-9 & {
				width: calc( #{ percentage( 1 / 4 ) } - #{ $gutter } );
			}

		}

		@include media( map_get( $breakpoint, 'm' ) ) {

			.gallery-columns-5 & {
				width: calc( #{ percentage( 1 / 5 ) } - #{ $gutter } );
			}

			.gallery-columns-6 &,
			.gallery-columns-7 &,
			.gallery-columns-8 &,
			.gallery-columns-9 & {
				width: calc( #{ percentage( 1 / 6 ) } - #{ $gutter } );
			}

		}

		@include media( map_get( $breakpoint, 'l' ) ) {

			.gallery-columns-7 & {
				width: calc( #{ percentage( 1 / 7 ) } - #{ $gutter } );
			}

			.gallery-columns-8 & {
				width: calc( #{ percentage( 1 / 8 ) } - #{ $gutter } );
			}

			.gallery-columns-9 & {
				width: calc( #{ percentage( 1 / 9 ) } - #{ $gutter } );
			}

		}

	}

	&-icon {
		height: 100%;
	}

	&-caption {
		position: absolute;
		width: 100%;
		max-height: 100%;
		bottom: 0;
		padding: 40px 10px 9px;
		font-size: 13px;
		text-align: center;
		background: linear-gradient(
			to top,
			rgba( #000, .7 ),
			rgba( #000, .3 ) 70%,
			rgba( #000, 0 ) // Do not use `transparent` due to Safari bug!
		);
		color: #fff;
		overflow: auto;
	}

	img {
		height: 100%;
		vertical-align: top;
		object-fit: cover;
	}

}