[data-products] {

	.products {
		display: grid;
		grid-column-gap: var(--cardsGap);

		@include media-breakpoint-only (md) {
			grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
		}
	}

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

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

		.columns-4 {
			grid-template-columns: repeat(4, 1fr);
		}

		.columns-5 {
			grid-template-columns: repeat(5, 1fr);
		}

		.columns-6 {
			grid-template-columns: repeat(6, 1fr);
		}
	}
}