@layer blocks {
	.column-row {
		align-items: start;
		display: grid;
		gap: 30px;
		
		@media (width >= 48em) {
			grid-template-columns: var(--columns, repeat(auto-fit, minmax(var(--column-min-size, 375px), 1fr)));
		}

		.align-center & {
			align-items: center;
		}

		.no-gap & {
			gap: 0;
		}

		& .mobile-first-column {
			@media (width < 48em) {
				order: -1;
			}
		}
	}

	.columns-33-66 {
		--columns: 1fr 2fr;
	}

	.columns-66-33 {
		--columns: 2fr 1fr;
	}

	.columns-33-33-33 {
		--columns: repeat(3, 1fr);
	}
}