.comic-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(10, 1fr );
	grid-gap: 10px;
	max-width: 1180px; 
	width: 100%;
	
}


.comic-gallery img {
	object-fit: cover; 
	width: 100%; 
    height: 100%; 
    align-items: center;

    border: 3px solid black;


}

.comic-gallery img:nth-child(1) {grid-column-start: span 1;}
.comic-gallery img:nth-child(2) {grid-column-start: span 1;}
.comic-gallery img:nth-child(3) {grid-column-start: span 1;}
.comic-gallery img:nth-child(4) {grid-column-start: span 1;}
.comic-gallery img:nth-child(5) {grid-column-start: span 2;}
.comic-gallery img:nth-child(6) {grid-column-start: span 2;}
.comic-gallery img:nth-child(7) {grid-row-start: span 2; grid-column-start: span 4;}
.comic-gallery img:nth-child(8) {grid-row-start: span 1; grid-column-start: span 4;}



@media only screen and (max-width: 700px) {
	.comic-gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(51, 1fr);
		max-width: 600px; 
	}
	.comic-gallery img:nth-child(1) {grid-column-start: span 1;}
	.comic-gallery img:nth-child(2) {grid-column-start: span 1;}
	.comic-gallery img:nth-child(3) {grid-column-start: span 1;}
	.comic-gallery img:nth-child(4) {grid-column-start: span 1;}
	.comic-gallery img:nth-child(5) {grid-column-start: span 2;}
	.comic-gallery img:nth-child(6) {grid-column-start: span 2;}
	.comic-gallery img:nth-child(7) {grid-row-start: span 2; grid-column-start: span 2}
	.comic-gallery img:nth-child(8) {grid-row-start: span 1; grid-column-start: span 2;}