/* blocks/category-columns
 *
 * The section carries a .columns-N class (N = number of repeater rows).
 * Each column's background image is inline; .has-background marks the ones
 * that have one so overlays/text colour can be scoped to those only.
 */

.section-category-columns {}

.section-category-columns .category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 44px;
	row-gap: 30px;
}

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

.section-category-columns .category-column {
	position: relative;
	display: flex;
}

.section-category-columns .category-column.has-background {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.section-category-columns .category-inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.section-category-columns .category-title {}
.section-category-columns .site-btn {}

@media (max-width: 1024px) {
	.section-category-columns .category-grid,
	.section-category-columns.columns-4 .category-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.section-category-columns .category-grid,
	.section-category-columns.columns-2 .category-grid,
	.section-category-columns.columns-4 .category-grid { grid-template-columns: 1fr; }
}