.c-articles-grid {
	background: var(--ag-bg);
	padding-block: var(--block-spacing-top, var(--spacing-xl)) var(--block-spacing-bottom, var(--spacing-xl));
}

.c-articles-grid__inner {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-articles-grid__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	row-gap: var(--spacing-lg);
	column-gap: var(--spacing-col);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-articles-grid__pagination {
	margin-top: var(--spacing-col);
}

.c-articles-grid__grid > li {
	display: flex;
}

.c-articles-grid__grid > li > * {
	width: 100%;
}

@media (width < 1100px) {
	.c-articles-grid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width < 560px) {
	.c-articles-grid__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (width >= 1100px) {
	.c-articles-grid--cols-3 .c-articles-grid__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.c-articles-grid--cols-2 .c-articles-grid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.c-articles-grid--rows .c-articles-grid__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (width < 1100px) {
	.c-articles-grid--rows .c-articles-grid__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.c-articles-grid--featured .c-articles-grid__grid {
	grid-template-columns: minmax(0, 1fr);
}

.c-articles-grid--featured .c-articles-grid__inner {
	gap: var(--spacing-col);
}