.wp-block-coblocks-gallery-offset {

	.coblocks-gallery {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 0;
		margin-left: 0;
		padding-left: 0;
	}

	img {
		max-height: 22vw;
		width: auto;
	}

	figcaption {
		background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 50%, transparent);
		bottom: 0;
		font-size: 13px;
		max-height: 100% !important;
		opacity: 1;
		overflow: hidden;
		padding: 30px 10px 10px !important;
		position: absolute !important;
		text-align: center;
		width: 100%;

		@mixin break-small-max() {
			display: none;
		}
	}

	.has-small-images img {
		@include break-small() {
			max-height: 22vw;
		}
		@include break-large() {
			max-height: 11vw;
		}
	}

	.has-medium-images img {
		@include break-small() {
			max-height: 28vw;
		}
		@include break-large() {
			max-height: 12vw;
		}
	}

	.has-large-images img {
		@include break-small() {
			max-height: 40vw;
		}
		@include break-large() {
			max-height: 20vw;
		}
	}

	.has-huge-images img {
		@include break-small() {
			max-height: 40vw;
		}
		@include break-large() {
			max-height: 30vw;
		}
	}

	.has-small-gutter,
	.has-medium-gutter,
	.has-large-gutter,
	.has-huge-gutter {
		margin-bottom: calc(var(--coblocks-spacing--1, #{map-get($spacing, 1)}) * -1 * 2);
		margin-left: calc(var(--coblocks-spacing--1, #{map-get($spacing, 1)}) * -0.5 * 2);

		figure {
			margin-bottom: calc(var(--coblocks-spacing--1, #{map-get($spacing, 1)}) * 2);
			margin-left: calc(var(--coblocks-spacing--1, #{map-get($spacing, 1)}) * 2);
		}
	}

	.has-medium-gutter {
		@include break-small() {
			margin-bottom: calc(var(--coblocks-spacing--2, #{map-get($spacing, 2)}) * -1 * 2);
			margin-left: calc(var(--coblocks-spacing--2, #{map-get($spacing, 2)}) * -0.5 * 2);

			figure {
				margin-bottom: calc(var(--coblocks-spacing--2, #{map-get($spacing, 2)}) * 2);
				margin-left: calc(var(--coblocks-spacing--2, #{map-get($spacing, 2)}) * 2);
			}
		}
	}

	.has-large-gutter {
		@include break-small() {
			margin-bottom: calc(var(--coblocks-spacing--3, #{map-get($spacing, 3)}) * -1 * 2);
			margin-left: calc(var(--coblocks-spacing--3, #{map-get($spacing, 3)}) * -0.5 * 2);

			figure {
				margin-bottom: calc(var(--coblocks-spacing--3, #{map-get($spacing, 3)}) * 2);
				margin-left: calc(var(--coblocks-spacing--3, #{map-get($spacing, 3)}) * 2);
			}
		}
	}

	.has-huge-gutter {
		@include break-small() {
			margin-bottom: calc(var(--coblocks-spacing--4, #{map-get($spacing, 4)}) * -1 * 2);
			margin-left: calc(var(--coblocks-spacing--4, #{map-get($spacing, 4)}) * -0.5 * 2);

			figure {
				margin-bottom: calc(var(--coblocks-spacing--4, #{map-get($spacing, 4)}) * 2);
				margin-left: calc(var(--coblocks-spacing--4, #{map-get($spacing, 4)}) * 2);
			}
		}
	}

	.has-custom-gutter {
		margin-bottom: calc(var(--coblocks-custom-gutter, 0) * -1 * 2);
		margin-left: calc(var(--coblocks-custom-gutter, 0) * -0.5 * 2);

		figure {
			margin-bottom: calc(var(--coblocks-custom-gutter, 0) * 2);
			margin-left: calc(var(--coblocks-custom-gutter, 0) * 2);
		}

		@include break-small() {
			margin-bottom: calc(var(--coblocks-custom-gutter, 0) * -1 * 2);
			margin-left: calc(var(--coblocks-custom-gutter, 0) * -0.5 * 2);

			figure {
				margin-bottom: calc(var(--coblocks-custom-gutter, 0) * 2);
				margin-left: calc(var(--coblocks-custom-gutter, 0) * 2);
			}
		}
	}
}
