/* CSS Document */

#main{
	margin-bottom: clamp(48px, calc(64 / 1200 * 100vw), 64px);
}

#theme{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	justify-content: center;
	margin-top: clamp(32px, calc(64 / 1200 * 100vw), 64px);
	&>*{
		grid-column: 2;
	}
	& h2{
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr auto 0;
		justify-content: center;
		column-gap: 16px;
		padding-bottom: 4px;
		border-bottom: 4px dotted currentColor;
		font-weight: 900;
		font-size: clamp(22px, calc(28 / 768 * 100vw), 28px);
		letter-spacing: 0.1em;
		text-align: center;
		&:before,
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 1;
			height: 1em;
			background: currentColor;
		}
		&:before{
			aspect-ratio: 1;
			transform: translateY(calc(0.325em - 50%));
			-webkit-mask: var(--icon-point) no-repeat left top / contain;
		}
		&:after{
			grid-column: 1;
			aspect-ratio: 20 / 16;
			margin-left: 0.75em;
			transform: translateY(0.325em);
			-webkit-mask: var(--icon-theme) no-repeat right bottom / contain;
		}
	}
	& h2+div{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		text-align: center;
		text-wrap: balance;
	}
	#themeList{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
}

#themeList{
	display: grid;
	grid-gap: clamp(32px, calc(40 / 1200 * 100vw), 40px) clamp(24px, calc(32 / 1200 * 100vw), 32px);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	& section{
		position: relative;
		display: grid;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
		}
	}
	& h3{
		display: grid;
		grid-template-columns: 1em 1fr;
		column-gap: 0.5em;
		margin-top: 0.5em;
		font-weight: 700;
		letter-spacing: 0.05em;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline fill="white" points="4 0 15 8 4 16"/></svg>') no-repeat center / 50%;
			border-radius: 100%;
			transform: translateY(0.325em);
		}
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
	}
}

#pagenation{
	margin-top: clamp(32px, calc(64 / 1200 * 100vw), 64px);
}