.c-article-grid {
	.c-article-grid__header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--spacing-md);
		margin-bottom: var(--spacing-md);

		@media (width <= 768px) {
			flex-wrap: wrap;
		}
	}

	.c-article-grid__title {
		color: var(--color-primary);
	}

	.c-article-grid__grid {
		display: grid;
		grid-template-rows: auto;
		column-gap: var(--spacing-md);
		row-gap: var(--spacing-lg);
		margin-bottom: var(--spacing-lg);

		@media (width <= 768px) and (width >= 480px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media (width > 768px) {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}