.custom-mosaic {
	/*==============================*/
	/*=====----- TEMPLATE -----=====*/
	/*==============================*/

	position: relative;
	container-type: inline-size;
	color: var(--black);

	.widget-inner {
		position: relative;
		z-index: 2;
		margin-bottom: 50px;
	}

	.slides {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-5);
		max-width: 1080px;
		padding: 0 var(--space-5);
		margin: 0 auto;
	}

	.template-header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--space-5);
		min-height: 250px;
		padding: var(--space-6);
		text-align: center;
		background: var(--blue-dark);
	}

	.template-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-normal);
		font-size: 1.75rem;
		line-height: 1.15;
		color: var(--white);
	}

	.background {
		position: absolute;
		inset: 58px 0 83px;
		z-index: -1;
		pointer-events: none;
	}

	/*============================*/
	/*=====----- SLIDES -----=====*/
	/*============================*/

	.slide,
	.slide-top,
	.img-cont,
	.slide-img {
		position: relative;
	}

	.slide-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.slide-top {
		order: -1;
	}

	.slide-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.slide-title {
		position: absolute;
		inset: auto auto -13px 0;
		z-index: 2;
		width: 80%;
		max-width: max-content;
		padding: 10px var(--space-3) 7px;
		margin: -20px 0 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-normal);
		font-size: var(--text-sm);
		line-height: 1.15;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: inherit;
		background: var(--white);
	}

	/*===================================*/
	/*=====----- MEDIA QUERIES -----=====*/
	/*===================================*/

	@container (min-width: 40em) {
		.slides {
			gap: var(--space-8);
		}

		.template-header {
			gap: var(--space-8);
		}

		.template-title {
			font-size: 2.5rem;
		}

		.slide-title {
			bottom: -22px;
			padding: var(--space-3) 14px 9px;
			font-size: var(--text-lg);
		}
	}

	@container (min-width: 64em) {
		.widget-inner {
			padding-bottom: 100px;
			margin-bottom: 100px;
		}

		.slides {
			grid-template:
				'. slide3 .' 35px
				'slide1 slide3 slide6' 268px
				'slide1 slide4 slide6' 147px
				'slide2 slide4 slide7' 157px
				'slide2 slide5 slide7' 262px
				'. slide5 .' 42px / minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
			gap: var(--space-8) 10px;
		}

		.background {
			top: 135px;
			bottom: 0;
		}

		.template-header,
		.slide-1 {
			grid-area: slide1;
		}

		.slide-2 {
			grid-area: slide2;
		}

		.slide-3 {
			grid-area: slide3;
		}

		.slide-4 {
			grid-area: slide4;
		}

		.slide-5 {
			grid-area: slide5;
		}

		.slide-6 {
			grid-area: slide6;
		}

		.slide-7 {
			grid-area: slide7;
		}
	}
}