@use "../../1-helpers/functions";

[data-layout="enhanced-grid"] {

	@include functions.media-breakpoint-down (sm) {
		--grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	@include functions.media-breakpoint-up (md) {
		--grid-template-columns: repeat( 6, 1fr);
	}

	> * {
		@include functions.media-breakpoint-only (md) {
			grid-column: span 3;
		}

		@include functions.media-breakpoint-up (lg) {
			grid-column: span 2;

			&:nth-child(5n+1),
			&:nth-child(5n+2) {
				grid-column: span 3;
			}
		}
	}
}