.wp-block-media-text.is-style-gate {
	row-gap: var( --wp--preset--spacing--sm-16 );

	@media ( min-width: 601px ) {
		--gate-thickness: clamp(
			1.5rem,
			1.5rem + ( ( 1.1vh - 0.2rem ) * 4.706 ),
			4rem
		);
	}

	.wp-block-media-text__media {
		display: grid;
		grid-template-rows: 1fr auto;
		overflow: hidden;
		position: relative;

		@media ( min-width: 601px ) {
			min-height: min( 80vh, 40rem ) !important;
		}
	}

	.wp-block-media-text__media > img {
		border-radius: 0;
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;

		/* Keep image-fill images in the grid: core positions them absolutely, which
		   sizes them against this collapsed grid track instead of the figure. */
		position: relative;

		@media ( min-width: 601px ) {
			width: calc( 100% - var( --gate-thickness ) );
		}
	}

	.wp-block-media-text__media::before {
		content: "";
		display: block;
		background-color: transparent;
		border-radius: var( --gate-right-radius );
		box-shadow: var( --gate-right-shadow );
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		height: calc( 100% - ( var( --gate-thickness ) * 2 ) );
		inset: var( --gate-right-inset );
		pointer-events: none;
		position: absolute;
		width: var( --gate-thickness );
		z-index: 1;

		@media ( max-width: 600px ) {
			border-radius: var( --gate-bottom-radius );
			box-shadow: var( --gate-bottom-shadow );
			height: var( --gate-thickness );
			inset: var( --gate-bottom-inset );
			width: calc( 100% - ( var( --gate-thickness ) * 2 ) );
		}
	}

	.gfo-block-caption {
		position: relative;
		z-index: 1;

		@media ( max-width: 600px ) {
			margin-top: var( --gate-thickness-neg );
			padding-left: var( --wp--style--root--padding-left );
			padding-right: var( --wp--style--root--padding-right );
			padding-top: var( --wp--preset--spacing--sm-16 );
		}

		@media ( min-width: 601px ) {
			margin-block: var( --wp--preset--spacing--sm-16 );
		}
	}

	&:not( .has-media-on-the-right ) .wp-block-media-text__media {
		@media ( min-width: 601px ) {
			img,
			&::before {
				margin-right: var( --gate-thickness );
			}

			.gfo-block-caption {
				margin-right: calc( var( --gate-thickness ) * 2 );
			}
		}
	}

	&.has-media-on-the-right .wp-block-media-text__media {
		@media ( min-width: 601px ) {
			img {
				margin-left: var( --gate-thickness );
			}

			&::before {
				border-radius: var( --gate-left-radius );
				box-shadow: var( --gate-left-shadow );
				inset: var( --gate-left-inset );
				margin-left: var( --gate-thickness );
			}

			.gfo-block-caption {
				margin-left: calc( var( --gate-thickness ) * 2 );
			}
		}
	}

	&.alignfull:not( .has-media-on-the-right ) .gfo-block-caption {
		padding-left: var( --wp--style--root--padding-left );
	}

	&.alignfull.has-media-on-the-right .gfo-block-caption {
		padding-right: var( --wp--style--root--padding-right );
	}

	&.alignwide .wp-block-media-text__media {
		@media ( max-width: 600px ) {
			margin-right: calc( var( --wp--style--root--padding-right ) * -1 );
			margin-left: calc( var( --wp--style--root--padding-left ) * -1 );
		}
	}
}