.media-text-block {
	padding-bottom: calc( var(--padding) * 1.5);
	padding-top: calc( var(--padding) * 1.5);
	position: relative;
	z-index: 2;

	@media screen and (max-width: 662px) {
		padding-top: calc( var(--padding) * 4 );
		padding-bottom: calc( var(--padding) * 3 );
	}

	&.media_right {
		& .wp-block-column:nth-child(1) {
			order: 1;
		}
		& .wp-block-column:nth-child(2) {
			order: 2;
		}
	}

	&.media_left {
		& .wp-block-column:nth-child(1) {
			order: 2;
		}
		& .wp-block-column:nth-child(2) {
			order: 1;
		}
	}


	.wp-block-columns {
		column-gap: 100px;
		row-gap: 50px;
		@media screen and (max-width: 662px) {
			column-gap: 50px;
		}
	}
	.wp-block-columns .wp-block-column {
		align-content: center;
	}


	/* START Layout 1 */
	.images.layout_1 {

		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 15px;
		justify-items: center;
		align-items: center;
		max-width: 800px;
		margin: 0 auto;
		position: relative;

		.image {
			position: relative;
			img {
				width: 100%;
				height: auto;
				display: block;
				object-fit: cover;
				object-position: center;
			}
		}


		/* Positioning each image manually for a staggered look */
		.layout-image-1 {
			grid-column: 1 / span 2;
			grid-row: 1;
			justify-self: end;
			position: relative;
			top: -30px;
			img {
				aspect-ratio: 3/4;
				max-width: 250px;
			}
		}

		.layout-image-2 {
			bottom: -30px;
			align-self: end;
			grid-column: 3 / span 2;
			grid-row: 1;
			position: relative;
			img {
				aspect-ratio: 1/1;
				max-width: 320px;
			}
		}

		.layout-image-3 {
			align-self: start;
			grid-column: 1 / span 2;
			grid-row: 2;
			position: relative;
			top: -30px;
			img {
				aspect-ratio: 1/1;
				max-width: 320px;
			}
		}

		.layout-image-4 {
			bottom: -30px;
			grid-column: 3 / span 2;
			grid-row: 2;
			justify-self: start;
			position: relative;
			img {
				aspect-ratio: 3/4;
				max-width: 250px;
			}
		}

	}
	/* END Layout 1 */


	/* START Layout 2 */
	.images.layout_2 {

		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 15px;
		justify-items: center;
		align-items: center;
		max-width: 800px;
		margin: 0 auto;
		position: relative;

		.image {
			position: relative;
			img {
				width: 100%;
				height: auto;
				display: block;
				object-fit: cover;
				object-position: center;
			}
		}


		/* Positioning each image manually for a staggered look */
		.layout-image-1 {
			bottom: -30px;
			align-self: end;
			grid-column: 1 / span 2;
			grid-row: 1;
			position: relative;
			img {
				aspect-ratio: 1/1;
				max-width: 320px;
			}
		}

		.layout-image-2 {
			grid-column: 3 / span 2;
			grid-row: 1;
			justify-self: start;
			position: relative;
			top: -30px;
			img {
				aspect-ratio: 3/4;
				max-width: 250px;
			}
		}

		.layout-image-3 {
			bottom: -30px;
			grid-column: 1 / span 2;
			grid-row: 2;
			justify-self: end;
			position: relative;
			img {
				aspect-ratio: 3/4;
				max-width: 250px;
			}
		}

		.layout-image-4 {
			align-self: start;
			grid-column: 3 / span 2;
			grid-row: 2;
			position: relative;
			top: -30px;
			img {
				aspect-ratio: 1/1;
				max-width: 320px;
			}
		}

	}
	/* END Layout 2 */


	/* START Layout 3 */
	.images.layout_3 {
		position: relative;
		height: 100%;

		.image {
			align-items: center;
			border: 10px solid var(--wp--preset--color--white);
			display: flex;
			justify-content: center;
			overflow: hidden;
			position: relative;
		}
		
		a.image {
			cursor: pointer;
			&::before {
				content: '';
				background-color: var(--wp--preset--color--black);
				height: 100%;
				left: 0;
				opacity: 0;
				position: absolute;
				top: 0;
				transition: 0.25s ease-in-out;
				width: 100%;
			}
			&:hover::before {
				opacity: 0.4;
			}
		}

		.image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: inherit;
		}

		.layout-wrapper {
			position: relative;
		}
		.layout-wrapper-3 {
			height: 0;
		}
		.layout-wrapper-4 {
			height: 160px;
		}

		/* Individual item positions and shapes */
		.layout-image-1 { /* Top left large rectangle */
			top: 20px;
			left: 40px;
			width: 360px;
			height: 360px;
			z-index: 0;
		}
		.layout-image-2 { /* Top right circle */
			position: absolute;
			top: 0px;
			left: 340px;
			width: 210px;
			height: 210px;
			border-radius: 50%;
			z-index: 3;
		}
		.layout-image-3 { /* Middle left rectangle */
			top: 0px;
			left: 0px;
			width: 240px;
			height: 240px;
			z-index: 2;
		}
		.layout-image-4 { /* Middle center rectangle */
			position: absolute;
			top: -60px;
			left: 230px;
			width: 150px;
			height: 240px;
			z-index: 2;
		}
		.layout-image-5 { /* Middle right rectangle */
			position: absolute;
			top: -160px;
			left: 370px;
			width: 260px;
			height: 260px;
			z-index: 2;
		}
		.layout-image-6 { /* Center circle */
			top: -190px;
			left: 180px;
			width: 165px;
			height: 165px;
			border-radius: 50%;
			z-index: 4;
		}
		.layout-image-7 { /* Bottom left rectangle */
			top: -40px;
			left: 60px;
			width: 210px;
			height: 160px;
			z-index: 0;
		}
		.layout-image-8 { /* Bottom middle rectangle */
			position: absolute;
			top: -70px;
			left: 260px;
			width: 170px;
			height: 230px;
			z-index: 1;
		}
		.layout-image-9 { /* Bottom right rectangle */
			top: -310px;
			left: 370px;
			width: 225px;
			height: 260px;
			z-index: 0;
		}

	}
	/* END Layout 3 */


	/* START Layout 4 */
	.images.layout_4 {
		position: relative;
		height: 100%;
		max-width: 610px;
		width: 100%;

		svg {
			max-width: 100%;
		}
		/* svg image {
			height: auto;
			object-fit: cover;
			object-position: center;
			width: 100%;
		} */

		.image {
			align-items: center;
			border: 10px solid var(--wp--preset--color--white);
			display: flex;
			justify-content: center;
			overflow: hidden;
			position: relative;
		}
		
		a.image {
			cursor: pointer;
			&::before {
				content: '';
				background-color: var(--wp--preset--color--black);
				height: 100%;
				left: 0;
				opacity: 0;
				position: absolute;
				top: 0;
				transition: 0.25s ease-in-out;
				width: 100%;
			}
			&:hover::before {
				opacity: 0.4;
			}
		}

		.image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: inherit;
		}

		.layout-wrapper {
			position: relative;
		}
		/*
		.layout-wrapper-1 {
		}
		.layout-wrapper-2 {
		}
		*/
		.layout-wrapper-3 {
			height: 0;
		}
		/*
		.layout-wrapper-4 {}
		*/

		.layout-image-1 { /* Top left rectangle */
			top: 0px;
			left: 3.25%; /* 20px */
			width: 45%; /* 275px */
			height: auto;
			z-index: 0;
			aspect-ratio: 1.75/2;
		}
		.layout-image-2 { /* Top Center rectangle */
			position: absolute;
			top: 30%; /* 100px */
			left: 45%; /* 280px */
			width: 41%; /* 250px */
			height: auto;
			z-index: 2;
			aspect-ratio: 1/1;
		}
		.layout-image-3 { /* Top right circle */
			position: absolute;
			top: 0px;
			left: 66%; /* 400px */
			width: 34.5%; /* 210px */
			height: auto;
			border-radius: 50%;
			z-index: 3;
			aspect-ratio: 1/1;
		}

		.layout-image-4 { /* 2nd row - left square */
			margin-top: -1.65%; /* -10px */
			left: 0px;
			width: 29.5%; /* 180px */
			height: auto;
			z-index: 3;
			aspect-ratio: 1/1;
		}
		.layout-image-5 { /* 2nd row - center square */
			position: absolute;
			top: -17%; /* -30px */
			left: 28%; /* 170px */
			width: 41%; /* 250px */
			height: auto;
			z-index: 1;
			aspect-ratio: 1/1;
		}
		.layout-image-6 { /* 2nd row - right square */
			position: absolute;
			top: 0px;
			left: 66%; /* 410px */
			width: 30%; /* 190px */
			height: auto;
			z-index: 1;
			aspect-ratio: 1/1;
		}

		.layout-image-7 { /* 3rd row - left square */
			position: absolute;
			margin-top: -6.6%; /* -40px */
			left: 13.25%; /* 80px */
			width: 28%; /* 170px */
			height: auto;
			z-index: 1;
			aspect-ratio: 1/1;
		}
		.layout-image-8 { /* 3rd row - center square */
			position: absolute;
			margin-top: -11.5%; /* -70px */
			left: 46%; /* 280px */
			width: 28%; /* 170px */
			height: auto;
			border-radius: 50%;
			z-index: 3;
			aspect-ratio: 1/1;
		}

		.layout-image-9 { /* 4th row - left square */
			margin-top: 14%; /* 85px */
			left: 0px;
			width: 28%; /* 170px */
			height: auto;
			z-index: 3;
			aspect-ratio: 1/1;
		}
		.layout-image-10 { /* 4th row - center left square */
			position: absolute;
			top: -35%; /* 30px */
			left: 26%; /* 26px */ 
			width: 35%; /* 210px */
			height: auto;
			z-index: 0;
			aspect-ratio: 1/1;
		}
		.layout-image-11 { /* 4th row - center right square */
			position: absolute;
			top: 30%; /* 110px */
			left: 50%; /* 280px */
			width: 28%; /* 170px */
			height: auto;
			z-index: 3;
			aspect-ratio: 1/1;
		}
		.layout-image-12 { /* 4th row - right square */
			position: absolute;
			top: -54%; /* -90px */
			left: 59%; /* 360px */
			width: 36%; /* 220px */
			height: auto;
			z-index: 1;
			aspect-ratio: 1.5/2;
		}


	}	
	/* END Layout 4 */


	/* START Layout 5 */
	.images.layout_5 {

		display: grid;
		grid-template-columns: 1fr;
		gap: 15px;
		justify-items: center;
		align-items: center;
		max-width: 800px;
		margin: 0 auto;
		position: relative;

		.image {
			aspect-ratio: 16 / 9;
			height: auto;
			position: relative;
			width: 100%;
			img {
				height: 100%;
				display: block;
				object-fit: cover;
				object-position: center;
				width: 100%;
			}
		}

	}
	/* END Layout 2 */

}


@media screen and (max-width: 1182px) {
	.media-text-block .images.layout_4 .image {
		border: 7px solid var(--wp--preset--color--white);
	}
}

@media screen and (max-width: 1023px) {

	.media-text-block .wp-block-columns {
		flex-direction: column;
	}
	.media-text-block .wp-block-columns .wp-block-column:nth-child(1) {
		text-align: center;
	}
	.media-text-block .wp-block-columns .wp-block-column:nth-child(1) .wp-block-buttons {
		justify-content: center;
	}
	.media-text-block .wp-block-columns .wp-block-column:nth-child(2) {
		display: flex;
		justify-content: center;
	}
	
}

@media screen and (max-width: 992px) {

	.media-text-block .images.layout_4 {
		padding-bottom: calc(var(--padding) + (var(--padding) / 2) );
	}

}