.article{
	padding-top: 32px;
}
.article .inner{
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--section-padding-horizontal);
}
.article .inner .container{
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.article .inner .container dl{
	display: flex;
	display: grid;
	grid-template-columns: 5fr 7fr;
	grid-template-rows: 1fr;
	gap: 16px;
}
.article .inner .container dl dt{
	padding: 40px;
	background-color: #F2F1EF;
	overflow: hidden;
	border-radius: var(--border-radius-block);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}
[data-scheme=dark] .article .inner .container dl dt{
	background-color: #222222;
}
.article .inner .container dl dt h2{
	font-weight: normal;
	font-size: var(--page-title-font-size);
	letter-spacing: var(--page-title-letter-spacing);
	line-height: var(--font-heading-line-height);
	color: var(--theme-default-text-color);
}
.article .inner .container dl dt p{
	font-size: 16px;
	color: rgb(var(--color-foreground-secondary));
}
.article .inner .container dl dd{
	aspect-ratio: 1.5;
	position: relative;
	overflow: hidden;
	border-radius: var(--border-radius-block);
}
.article .inner .container dl dd img{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.article-template-header-meta{
	font-size: 14px;
	color: rgb(var(--color-foreground-secondary));
}

.document{
	padding-top: 32px;
	color: var(--theme-default-text-color);
}
.document .inner{
	width: 100%;
	max-width: 680px;
	margin: 0 auto;
	padding: 0 20px;
}
.document .inner ul{
	list-style: disc outside none;
}
.document .inner ol{
	list-style: decimal outside none;
}
.share{
	padding: 0 20px;
	margin-top: 32px;
}
.share .inner{
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-top: 1px solid rgba(var(--color-border));
	border-bottom: 1px solid rgba(var(--color-border));
	padding: 20px 0;
	gap: 24px;
}
.share .inner h3{
	font-size: 14px;
	color: var(--theme-default-text-color);
	font-weight: normal;
}
.share .inner ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: flex-end;
}
.share .inner ul li a{
	display: flex;
	flex-direction: row;
	align-items: center;
	color: rgba(var(--color-foreground-secondary));
	transition: color var(--duration-default) 
	ease;
	font-size: 14px;
	gap: 6px;
}
.share .inner ul li a:hover{
	color: rgba(var(--color-foreground));
}

@media screen and (max-width:1024px){
	.article .inner .container dl{
		display: flex;
		flex-direction: column;
	}
	.article .inner .container dl dt{
		gap: 20px;
		padding: 32px;
	}
	.article .inner .container dl dt p{
		font-size: 14px;
	}
}

@media screen and (max-width:767px){
	.article-template-header-meta{
		font-size: 12px;
	}
	.article .inner .container dl dt{
		gap: 16px;
		padding: 24px;
	}
}