/* CSS Document */

#main{
	margin-bottom: clamp(56px, calc(104 / 1200 * 100dvw), 104px);
}

article{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&>*{
		grid-column: 2;
	}
	&:not([id]){
		display: none;
	}
	& h2{
		font-weight: 600;
		font-family: var(--font), var(--font-min);
	}
}

#comic{
	grid-row-gap: 32px;
	padding-top: clamp(24px, calc(56 / 1200 * 100vw), 56px);
	overflow: hidden;
	& h2{
		position: relative;
		justify-self: flex-start;
		padding-bottom: 4px;
		font-weight: 600;
		font-size: 28px;
		letter-spacing: 0.05em;
		@media (min-width: 992px) {
			font-size: 36px;
		}
		&:before,
		&:after{
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100%;
			border-bottom: 2px solid #999;
		}
		&:after{
			right: 100%;
			width: 100vw;
			border-color: var(--color-theme);
		}
	}
	& h2+div{
		margin: auto;
		max-width: 700px;
	}
	& figure{
		display: grid;
		grid-gap: clamp(40px, calc(56 / 1200 * 100vw), 56px);
		justify-items: center;
		.column-01 &{
			grid-template-columns: 1fr;
		}
		.column-02 &{
			@media (min-width: 992px) {
				grid-template-columns: 1fr 1fr;
			}
		}
	}
}