@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins/breakpoints";

@mixin shop-list-item($breakpoint, $flex-basis, $num-columns) {
	@include media-breakpoint-only($breakpoint) {
		flex-basis: $flex-basis;
		margin-left: calc((100% - #{$num_columns} * #{$flex-basis}) / (#{$num_columns} - 1));
		&:nth-child(#{$num_columns}n + 1) {
			margin-left: 0;
		}
	}
}

.shop-catalog-list {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	max-width: 100%;
	.shop-list-item {
		flex-grow: 0;
		flex-basis: 100%;
		flex-shrink: 0;
		margin-bottom: 1rem;
		@include shop-list-item(sm, 15.5rem, 2);
		@include shop-list-item(md, 14rem, 3);
		@include shop-list-item(lg, 14rem, 4);
		@include shop-list-item(xl, 13rem, 5);
		@import "product-figure";
	}
}

.pagination {
	margin-top: 15px !important;
}
