.layout {
	--layout-column-setting: auto;
	--layout-gap: 1rem; /* Defaults to 'small' */
	display: grid;
	grid-template-columns: var(--layout-column-setting);
	gap: var(--layout-gap);
}

.layout > li {
	text-align: center;
}

.layout > * {
	display: block;
	min-inline-size: 14rem;
}

.layout:has(~ *:not(.container_footer)) {
	margin-block-end: var(--layout-gap);
}

ul.layout {
	list-style-type: "";
	margin: 0;
	padding: 0;
}

.layout[data-gap="none"] {
	--layout-gap: 0;
}

.layout[data-gap="small"] {
	--layout-gap: 1rem;
}

/*
	Gap @ large size:            3rem x 1 =  3rem
	Min inline-size of item:    14rem x 2 = 28rem
	---------------------------------------------
	Total:                                  31rem
*/
@media (min-width: 31rem) {
	.layout > .card {
		display: grid;
		grid-template-rows: subgrid;
		align-content: stretch;
		grid-row: span var(--card-layout-number-of-rows);
	}

	.layout > .card:has(> *:nth-child(1)) {
		--card-layout-number-of-rows: 1;
	}

	.layout > .card:has(> *:nth-child(2)) {
		--card-layout-number-of-rows: 2;
	}

	.layout > .card:has(> *:nth-child(3)) {
		--card-layout-number-of-rows: 3;
	}

	.layout > .card:has(> *:nth-child(4)) {
		--card-layout-number-of-rows: 4;
	}

	.layout > .card > picture {
		display: flex;
		flex-direction: column;
		justify-content: end;
	}

	.layout[data-gap="large"] {
		--layout-gap: 3rem;
	}
	
	.layout:is(
		[data-columns="2"],
		[data-columns="4"]
	) {
		--layout-column-setting: repeat(2, 1fr);
	}
}

/*
	Gap @ large size:            3rem x 2 =  6.0rem
	Min inline-size of item:    14rem x 3 = 42.0rem
	-----------------------------------------------
	Total:                                  48.0rem
*/
@media (min-width: 48rem) {
	.layout[data-columns="3"] {
		--layout-column-setting: repeat(3, 1fr);
	}
}

/*
	Gap @ large size:            3rem x 3 =  9rem
	Min inline-size of item:    14rem x 4 = 56rem
	---------------------------------------------
	Total:                                  65rem
*/
@media (min-width: 65rem) {
	.layout[data-columns="4"] {
		--layout-column-setting: repeat(4, 1fr);
	}
}