@shower/ribbon/styles/shower/shower-list.css

Ribbon theme for Shower HTML presentation engine

/* Shower List */

.shower.list {
	--shower-list-columns: 1;

	--slide-scale: calc(
		tan(atan2(var(--viewport-width), var(--slide-width))) /
		(
			var(--shower-list-columns) +
			(var(--shower-list-columns) + 1) *
			tan(atan2(var(--slide-gap), var(--slide-width)))
		)
	);

	--shower-list-block: calc(
		var(--slide-gap) *
		var(--slide-scale)
	);
	--shower-list-inline: calc(
		var(--slide-gap) *
		var(--slide-scale) +
		env(safe-area-inset-left)
	);
	display: grid;
	grid-template-rows: min-content;
	grid-template-columns: repeat(
		var(--shower-list-columns),
		calc(var(--slide-width) * var(--slide-scale))
	);
	grid-auto-rows: calc(
		var(--slide-height) * var(--slide-scale)
	);

	padding:
		var(--shower-list-block)
		var(--shower-list-inline);
	box-sizing: border-box;
	width: 100%;

	overflow-x: hidden;
	background-color: var(--color-grey);
	grid-gap: calc(
		var(--slide-gap) * var(--slide-scale)
	);
}

/* Responsive */

@media (width >= 640px) {
	.shower.list {
		--shower-list-columns: 2;
	}
}

@media (width >= 1024px) {
	.shower.list {
		--shower-list-columns: 3;
	}
}

@media (width >= 1600px) {
	.shower.list {
		--shower-list-columns: 4;
	}
}