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

// Backwards compatibility: Gallery shortcode.
.gallery {
	--wp--style--unstable-gallery-gap: var(--wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) );

	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) );

	&-item {
		position: relative;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		justify-content: center;
		max-width: 100%;
	}

	&-caption {
		position: absolute;
		flex-basis: 100%;
		flex-grow: 1;
		width: 100%;
		max-height: 60%;
		padding: 1em;
		margin: 0;
		inset-inline-start: 0;
		inset-block-end: 0;
		font-size: var(--wp--preset--font-size--s);
		text-align: center;
		background: linear-gradient( 0deg, rgba( #000, .7 ), rgba( #000, .3 ) 70%, transparent );
		color: #fff;
		overflow: auto;
	}

	@for $i from 2 through 9 {
		&-columns-#{$i} .gallery-item {
			width: calc( #{ percentage( math.div( 1, $i ) ) } - var(--wp--style--unstable-gallery-gap, 1rem ) * #{ math.div( ( $i - 1 ), $i ) } );
		}
	}
}
