.krio-archive {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: 1220px;
	padding: 56px 30px 72px;
	width: 100%;
}

.krio-transformations {
	--krio-gap: 24px;
	gap: var(--krio-gap);
}

.krio-transformations--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.krio-transformations--carousel {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	padding-bottom: 12px;
}

.krio-transformations--carousel .krio-transformation {
	flex: 0 0 min(82vw, 420px);
	scroll-snap-align: start;
}

.krio-transformation {
	margin: 0;
}

.krio-transformation a,
.krio-transformation img {
	display: block;
	width: 100%;
}

.krio-transformation img {
	aspect-ratio: 1;
	object-fit: cover;
	height: auto;
}