Grid Column Adjustment for AJAX Taxonomy Filter + Loop Grid (Custom JS & CSS)

				
					<style>
	.wide-post {
		grid-column: span 2 !important;
	}
	.wide-post .elementor-page-title.elementor-widget-heading {
		width: 100%;
	}
	.wide-post > div > div > div > div {
		--content-width: 100% !important;
	}
	@media only screen and (max-width: 1024px) {
		.wide-post {
			grid-column: unset !important;
		}
		.wide-post .elementor-page-title.elementor-widget-heading {
			width: unset !important;
		}
		.wide-post > div > div > div > div {
			--content-width: unset !important;
		}
	}
</style>


<script>
	jQuery(function($) {
		function markEveryFifthMinusOne($container) {
			const $items = $container.find('.elementor-loop-container > div');
			$items.removeClass('wide-post'); // Reset


			$items.each(function(index) {
				if ((index + 1) % 5 === 4) { // 4th, 9th, 14th...
					$(this).addClass('wide-post');
				}
			});
		}


		const $loopGrid = $('#insight_loop_grid');


		function observeLoopUpdates() {
			const loopContainer = $loopGrid.find('.elementor-loop-container').get(0);


			if (loopContainer) {
				const observer = new MutationObserver(function(mutationsList) {
					for (const mutation of mutationsList) {
						if (mutation.type === 'childList') {
							markEveryFifthMinusOne($loopGrid);
							break;
						}
					}
				});


				observer.observe(loopContainer, {
					childList: true,
					subtree: false
				});
			}
		}


		if ($loopGrid.length) {
			markEveryFifthMinusOne($loopGrid);
			observeLoopUpdates();
		}
	});
</script>