/* CSS Document */

#topics{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&>* {
		grid-column: 2;
	}
	& header{
		grid-column: 1 / 4;
		padding: clamp(24px, calc(56 / 1200 * 100dvw), 56px) 0;
		background: rgba(var(--color-theme-rgb), 0.15);
	}
}

#topicsList{
	margin-top: clamp(56px, calc(96 / 1200 * 100dvw), 96px);
	& p{
		padding: 10% 0;
		text-align: center;
		opacity: 0.5;
	}
	& dl{
		display: grid;
		grid-gap: 8px 16px;
		position: relative;
		padding-bottom: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		border-bottom: 1px dotted var(--color-border);
	}
	& dl+dl{
		margin-top: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	}
	& dt{
		line-height: 1.5;
		& a{
			color: var(--color);
		}
	}
	& dd{
		display: contents;
	}
	& time{
		order: -1;
		color: var(--color-theme);
	}
	@media (min-width: 576px) {
		& dl{
			grid-template-columns: auto 1fr;
		}
	}
}