.docs-grid-1,
.docs-grid-2,
.docs-grid-3plus,
.docs-grid-4plus,
.docs-grid-6plus {
	display: grid;
	/* margin: 2rem auto; */
	padding: 2rem 0; 
	max-width: 1440px;
	gap: 1rem;	
	overflow: hidden; /* prevent collapsing margins */
}

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

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

.docs-grid-1 img,
.docs-grid-2 img,
.docs-grid-3plus img,
.docs-grid-4plus img,
.docs-grid-6plus img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
	margin: 0 !important;
}

@media screen and (max-width: 767px) {
	
	.docs-grid-3plus {
		grid-template-columns: repeat(2, 1fr);
	}
	.docs-grid-4plus {
		grid-template-columns: repeat(3, 1fr);
	}
	.docs-grid-6plus {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (max-width: 479px) {
	
	.docs-grid-2,
	.docs-grid-3plus {
		grid-template-columns: 1fr;
	}
	
	.docs-grid-4plus {
		grid-template-columns: repeat(2, 1fr);
	}
	.docs-grid-6plus {
		grid-template-columns: repeat(3, 1fr);
	}
}