@charset "UTF-8";
/* CSS Document */

.products {
	grid-template-columns: repeat(4, minmax(200px, 1fr) ) ;
	gap: 20px;
}

.productgroep-archive {
	padding: 30px;
}

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

.page-numbers {
	display: flex;
	list-style: none;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

.page-numbers li {
	display: grid;
	justify-items: center;
	align-items: center;
	border: 1px solid var(--shd-mid);
	border-radius: var(--btn-radius);
}

.page-numbers li a, .page-numbers li:has(.dots) {
	text-decoration: none;
	color: var(--act-primary);
	font-weight: 600;
	width: 40px;
	height: 40px;
}

.page-numbers li:has(.current) {
	color: var(--white);
	background-color: var(--act-primary);
	font-weight: 600;
	border-color: var(--act-primary);
	width: 40px;
	height: 40px;
}

/* masonry galerij */

.foto-filters {
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 50px;
}

.foto-filters label {
	font-size: 28px;
	color: var(--act-dark);
	font-weight: 600;
}

.foto-filters .section {
	gap: 10px;
}

.foto-filters .section select {
	border-color: var(--text);
}

.masonry-item {
	width: calc(33.3% - 13px);
	height: 250px;
	margin-bottom: 20px;
}

.masonry .portrait {
	height: 520px;
}

.masonry-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--std-radius);
}

@media screen and (max-width: 1180px) and (orientation: portrait),
screen and (max-width: 1024px) {
    .archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.products {
		grid-template-columns: repeat(3, minmax(200px, 1fr) ) ;
	}
}

@media screen and (max-width: 768px) {
	.archive-grid {
		grid-template-columns: repeat(1, 1fr);
	}
	
	.products {
		grid-template-columns: repeat(2, minmax(200px, 1fr) ) ;
	}
	
	.foto-filters {
		grid-template-columns: 1fr;
	}
	
	.masonry-item {
		width: 100%;
	}
}

@media screen and (max-width: 530px) {
	.products {
		grid-template-columns: repeat(1, minmax(200px, 1fr) ) ;
	}
}