/* CSS Document */

main{
	padding-bottom: clamp(120px, calc(160 / 1200 * 100vw), 160px);
}

article{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin: clamp(32px, calc(48 / 1200 * 100vw), 48px) 0 40px 0;
	&>*{
		grid-column: 2;
	}
}

#topics {
	& h2{
		justify-self: center;
		display: grid;
		align-items: center;
		grid-row-gap: 8px;
		margin: 0 16px;
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 1200 * 100vw), 24px);
		letter-spacing: 0.2em;
		text-align: center;
		&:before{
			content: "";
			padding-bottom: 8px;
			aspect-ratio: 170 / 75;
			width: 100%;
			height: 80px;
			background: #7EC6C6;
			background: linear-gradient(300deg,rgba(126, 198, 198, 1) 0%, rgba(100, 159, 225, 1) 100%);
			-webkit-mask: var(--news-title) center center no-repeat;
		}
	}
}

#topicsList{
	margin-top: 32px;
	& dl{
		position: relative;
		display: grid;
		grid-gap: 8px;
		padding: 16px 0;
		border-bottom: 1px solid var(--color-border);
		@media (min-width: 992px) {
			padding: 24px 0;
		}
		&:last-child{
			border-color: currentColor;
		}
		&:has(a){
			padding-right: 40px;
		}
	}
	& dt{
		letter-spacing: 0.05em;
		& a{
			color: inherit;
			text-decoration: none;
		}
	}
	& dd{
		order: -1;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 8px;
		&:has(a){
			display: contents;
		}
		& time{
			margin-right: 4px;
			font-size: 13px;
			letter-spacing: 0.05em;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			display: grid;
			grid-template-columns: 1fr 16px;
			align-items: center;
			width: 100%;
			height: 100%;
			padding: 16px;
			color: inherit;
			font-size: 0;
			z-index: 1;
		}
		& a:after{
			content: "";
			width: 24px;
			aspect-ratio: 1;
			background: currentColor;
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M17.94,9.8s-.01-.02-.02-.03c-.05-.08-.12-.13-.21-.16l-8.93-4.4c-.06-.03-.12-.04-.19-.04-.08,0-.15.02-.22.06-.12.08-.2.21-.2.36v3.94s0,.04.01.05H2.42c-.23,0-.42.19-.42.42,0,.23.19.42.42.42h13.36s-6.77,3.32-6.77,3.32v-1.91c0-.23-.19-.42-.42-.42s-.42.19-.42.42v2.59c0,.15.08.28.2.36.12.08.28.08.41.02l8.98-4.41c.1-.05.16-.13.2-.22,0,0,0,0,0,0,.02-.05.03-.1.03-.15,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01,0-.02,0-.04,0-.07-.02-.11,0-.03-.02-.05-.03-.07ZM9.02,9.52v-3.26s6.73,3.32,6.73,3.32h-6.74s.01-.04.01-.05Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background-size: 16px;
			border-radius: 100%;
		}
	}
	& p{
		padding: 10% 0;
		text-align: center;
	}
	& ul{
		display: contents;
	}
	& li{
		display: grid;
		align-items: center;
		font-size: 10px;
		letter-spacing: 0.1em;
		min-height: 20px;
		padding: 0 16px;
		background: #fff;
		border-radius: 4px;
		color: #333;
		font-weight: 700;
		text-transform: uppercase;
		&:not([class]) {
			border: 1px solid #999;
		}
		&[class] {
			color: #fff;
		}
		&.tagCheck{
			background: #4681b3;
		}
		&.tagNew{
			background: #ce1c24;
		}
	}
}