[data-products] {
	display: grid;
	grid-template-columns: var(--shop-columns) !important;
	grid-column-gap: var(--grid-columns-gap, 30px);


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

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

		&.columns-4 {
			--shop-columns: repeat(4, 1fr);
		}

		&.columns-5 {
			--shop-columns: repeat(5, 1fr);
		}

		&.columns-6 {
			--shop-columns: repeat(6, 1fr);
		}
	}
}