/* CSS Document */

:root{
	--bg: #f0f5f7;
}

#main{
	background: var(--bg);
}

#theme{
	display: grid;
	&:before{
		content: "";
		grid-column: 1;
		grid-row: 2;
		justify-self: center;
		width: min(100%, 1236px);
		background: white;
		margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
	}
	& hgroup{
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		grid-row-gap: 16px;
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			background: white;
			margin-bottom: -8px;
		}
		& h2{
			grid-column: 2;
			grid-row: 1;
			margin-top: 24px;
			font-weight: 900;
			font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			letter-spacing: 0.15em;
			text-align: center;
		}
		& p{
			grid-column: 2;
			grid-row: 2;
			justify-self: center;
			background: linear-gradient(90deg, var(--color-theme) 0.7em, currentColor 0.7em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: 600;
			font-size: clamp(20px, calc(28 / 1366 * 100dvw), 28px);
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.2em;
			white-space: nowrap;
		}
	}
	&:before{
		content: "";
		grid-column: 1;
		grid-row: 2;
		justify-self: center;
		width: min(100%, 1236px);
		background: white;
		margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
	}
	#themeList{
		grid-column: 1;
		grid-row: 2;
		margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		padding: clamp(48px, calc(64 / 768 * 100dvw), 64px) 0 clamp(96px, calc(120 / 768 * 100dvw), 120px) 0;
		z-index: 0;
	}
	@media (min-width: 992px) {
		&:before{
			border-radius: 40px 40px 0 0;
		}
	}
}

#themeList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 264px), 1fr));
	grid-gap: 24px;
	width: var(--wrap);
	margin-inline: auto;
	& section{
		position: relative;
		display: grid;
		aspect-ratio: 1;
		overflow: hidden;
		transition: border-radius 0.2s ease-out;
		&:not(:has(img)):before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--dummy);
		}
		&:hover{
			border-radius: 100%;
		}
	}
	& h3{
		display: grid;
		place-items: center;
		background: color-mix(in srgb, transparent, #001b48 24%);
		color: #fff;
		font-weight: 800;
		font-size: 20px;
		letter-spacing: 0.15em;
		text-align: center;
		writing-mode: vertical-rl;
		text-shadow: 0 0 5px color-mix(in srgb, transparent, #001b48 50%);
		z-index: 1;
	}
	& h3+div{
		display: contents;
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
		z-index: 1;
	}
	& figure{
		display: contents;
		& img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}