.comic {
	display: grid;
	grid-template-rows: 0.35fr 0.35fr 0.3fr;
	margin: 0 auto;
}

[class^=panel-] {
	background-color: #fff;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.panelgroup-1 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-row: 1 / span 2;
	grid-column: 1;
}

.panel-1 {
	grid-row: 1;
	grid-column: 1 / span 2;
	clip-path: polygon(0 0, 50% 0, 60.00% 100.00%, 0 100%);
	
	img {
		clip-path: polygon(0 0, 48% 0, 57% 100%, 0 100%);
	}
}

.panel-2 {
	grid-row: 1;
	grid-column: 2 / span 2;
	clip-path: polygon(0 0, 50% 0, 58% 100%, 10% 100%);
	z-index: 1;
	
	img {
		clip-path: polygon(0 0, 48.5% 0, 56% 100%, 10% 100%);
	}
}

.panel-3 {
	grid-row: 1;
	grid-column: 3;
	
	img {
		clip-path: polygon(0 0, 97% 0, 66% 100%, 0 100%);
	}
}

.panel-4 {
	grid-row: 1;
	grid-column: 3 / 5;
	clip-path: polygon(101px 0, 200px 0, 200px 493px, 71px 493px);
	
	img {
		clip-path: polygon(101px 0, 192px 0, 145px 494px, 71px 493px);
	}
}

.panel-5 {
	grid-row: 1;
	grid-column: 4 / -1;
	clip-path: polygon(48% 0, 100% 0, 100% 100%, 25% 100%);
}

.panel-6 {
	grid-row: 1;
	grid-column: 5;
	clip-path: polygon(100% 37%, 100% 100%, 16% 100%);
}

.panelgroup-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr) 1.4fr 0.8fr 1fr 1.7fr;
	grid-template-rows: 2.5fr repeat(2, 1fr) 1.6fr;
	grid-row: 2 / span 2;
	grid-column: 1;
	z-index: 3;
}

.panel-7 {
	grid-row: 1 / -1;
	grid-column: 1 / -1;
	clip-path: ellipse(360px 370px at 340px 372px);
	
	img {
		clip-path: ellipse(354px 364px at 340px 372px);
	}
}

.panel-8 {
	grid-row: 1 / -1;
	grid-column: 2 / -1;
	clip-path: ellipse(271px 279px at 273px 410px);
	
	img {
		clip-path: ellipse(267px 275px at 273px 410px);
	}
}

.panel-9 {
	grid-row: 2 / -1;
	grid-column: 3 / -1;
	clip-path: ellipse(250px 213px at 251px 215px);
	
	img {
		clip-path: ellipse(246px 209px at 251px 215px);
	}
}

.panel-10 {
	grid-row: 3 / -1;
	grid-column: 4 / -1;
	clip-path: ellipse(176px 159px at 177px 161px);
	
	img {
		clip-path: ellipse(172px 155px at 177px 161px);
	}
}

.panel-11 {
	grid-row: 4 / -1;
	grid-column: 5 / -1;
	clip-path: ellipse(112px 92px at 114px 96px);
	
	img {
		clip-path: ellipse(108px 88px at 114px 96px);
	}
}

.panel-12 {
	grid-row: 4 / -1;
	grid-column: 6 / -1;
	clip-path: circle(80px at 82px 100px);
	
	img {
		clip-path: circle(76px at 82px 100px);
	}
}

.panel-13 {
	grid-row: 4 / -1;
	grid-column: 6 / -1;
	clip-path: circle(61px at 109px 106px);
	background-color: white;
}

// Themeing

body {
	background-color: #333745;
	display: grid;
	place-items: start center;
	grid-template-rows: max-content auto;
	gap: 1rem;
	height: 100vh;
}

.comic {
	width: 500px;
	height: 705px;
	padding: 1rem;
	margin: 2rem 0;
	background-color: #fff;
	box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.2);
}

.collection {
	position: absolute;
	display: block;
	padding: 0.5rem 1rem;
	border: 1px solid #F07739;
	left: 10px;
	top: 10px;
	color: #F07739;
	text-decoration: none;
	font-weight: 700;
	
	&:hover {
		background-color: #F07739;
		color: #333745;
	}
}