/* CSS Document */

#topics{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	}
	#topics > *{
		grid-column: 2;
		}
	#topics h2{
		display: grid;
		grid-template-columns: auto auto;
		align-items: center;
		justify-content: center;
		grid-gap: 8px;
		font-weight: 700;
		font-size: clamp(24px, 4.8vw, 32px);
		font-family: var(--font-min);
		margin: clamp(32px, 6vw, 40px) 0;
		}
		#topics h2:before{
			content: "";
			width: 16px;
			height: 6px;
			background: #aba52f;
			border-radius: 3px;
			transform: translateY(0.1em);
			}
	#topicsList{
		grid-column: 1 / 4;
		}
	@media (min-width: 1200px) {
		#topics h2{
			font-size: 40px;
			grid-gap: 16px;
			}
			#topics h2:before{
				width: 24px;
				height: 8px;
				border-radius: 4px;
				}
		}

#topicsList{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-gap: 24px 0;
	padding: clamp(32px, 6vw, 40px) 0 clamp(56px, 9.6vw, 64px) 0;
	background: #f6f1e7;
	}
	#topicsList:last-child{
		padding-bottom: clamp(64px, 12vw, 80px);
		}
	#topicsList dl{
		grid-column: 2;
		padding: clamp(16px, 3.6vw, 24px);
		}
	#topicsList dl{
		position: relative;
		display: grid;
		align-content: center;
		grid-gap: 8px;
		min-height: 112px;
		padding: 8px 24px 8px 48px;
		background: #fff;
		border: 1px solid #d1d1d1;
		border-width: 1px 0 1px 1px;
		border-radius: 56px 0 0 56px;
		transition: background 0.2s ease-out;
		}
		#topicsList dl:hover{
			background: rgba(255, 255, 255, 0.8);
			}
	#topicsList dt{
		width: 100%;
		font-weight: 700;
		}
	#topicsList dd{
		display: contents;
		}
	#topicsList time{
		order: -1;
		}
	#topicsList ul{
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		grid-gap: 8px;
		transform: translateY(-50%);
		}
	#topicsList li{
		display: grid;
		align-items: center;
		min-height: 28px;
		min-width: 80px;
		padding: 0 16px;
		border-radius: 14px;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		font-size: 14px;
		text-align: center;
		}
		#topicsList li.tagNew{
			background: #80afb5;
			}
	#topicsList a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
		}
	#topicsList p{
		grid-column: 2;
		padding: 10% 0;
		text-align: center;
		}
	@media (max-width: 991.98px) {
		#topicsList dl{
			grid-column: 2 / 4;
			}
		}
	@media (min-width: 992px) {
		#topicsList dl{
			padding-right: 48px;
			border-width: 1px;
			border-radius: 56px;
			}
		}

#pagenation{
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	background: #f6f1e7;
	padding-bottom: clamp(64px, 12vw, 80px);
	}
	#pagenation > *{
		grid-column: 2;
		}