グリッドレイアウトで、レスポンシブ対応のアーカイブを作成

<div id="grid-column"＞
	<ul class="gridcolumn">
		<?php
			$custom_posts = get_posts(array(
				'post_type' => 'all_demos',
				'posts_per_page' => 14,
			));
			global $post;
		?>
		<?php if($custom_posts): ?>
			<?php foreach($custom_posts as $post): setup_postdata($post); ?>
				<li class="grid-item">
					<div class="about-news-icon zoomIn">
						<a href="<?php echo esc_url(get_permalink()); ?>">
							<?php if(has_post_thumbnail()): ?>
                    			<?php the_post_thumbnail('medium_large'); ?>
                			<?php else: ?>
                				<img src="<?php echo esc_url(get_theme_file_uri('/assets/images/damy001.jpg')); ?>" alt="damy" >
            				<?php endif; ?>
						</a>
					</div>
				</li>
			<?php endforeach; ?>
		<?php endif; wp_reset_postdata(); ?>
	</ul>
</div>

#grid-column {
	max-width: 1500px;
    margin: 0 auto;
    padding: 0 4%;
}
#grid-column .about-news-icon {
	width: 100%;
	height: 100%;
	aspect-ratio: 1/1;
	overflow: hidden;
	float: left;
	object-position: 50% 50%;
	margin-bottom: 0;
	padding-bottom: 0;
	border-radius: 5px;
	will-change: transform;
}
#grid-column .news{
	text-align: left;
	margin-bottom: 0;
	padding-bottom: 0;
	width: 100%;
	display: inline-block;
}
.gridcolumn {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(4, 1fr);
	padding-top: 6%;
	padding-bottom: 6%;
}
.gridcolumn li:first-child {   
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}
.gridcolumn li:nth-child(14) { 
	grid-column: 3 / 5;
	grid-row: 4 / 6;
}

@media (max-width: 740px) {	
	.gridcolumn {
    	grid-template-columns: repeat(2, 1fr);
	}
	.gridcolumn li:first-child {
		grid-column: auto;
        grid-row: auto;
	}
	.gridcolumn li:nth-child(14) {
		grid-column: auto;
        grid-row: auto;
	}
}