.snippet-container {
	padding-top: var(--padding4);
	grid-template-areas: 
		"content content content content"
		"aside aside aside aside"
	;
	@media screen and (min-width: 35em) {
		grid-template-areas: "content content content content content content aside aside";
	}
	@media screen and (min-width: 50em) {
		grid-template-areas: "content content content content content content content content content aside aside aside";
	}
	& .snippet-post {
		grid-area: content;
	}
	& aside {
		grid-area: aside;
	}
}

.snippet-post {
	hanging-punctuation: first last;
	& > *:first-child {
		margin-top: 0;
	}
	& figure {
		margin: 0;
		width: 100%;
		& picture {
			width: 100%;
			& img {
				width: 100%;
				height: auto;
				box-shadow: var(--shadowProminent);
			}
		}
	}
}

.snippet-meta {
	padding-top: var(--padding3);
	& time {
		display: block;
		margin-bottom: var(--margin1);
	}
}

.microblog_conversation {
	padding-top: var(--padding8);
}

.microblog_post {
	padding: var(--padding3Bordered) var(--padding1Bordered);
	border: 1px solid var(--borderProminentColor);
	box-shadow: var(--shadowProminent);
	background: var(--popupBackground);
	margin-bottom: var(--margin3);
}

.microblog_user {
	display: flex;
	gap: var(--margin2);
	align-items: center;
}

.microblog_avatar {
	max-width: 48px !important;
	width: 48px;
	height: 48px;
}

.microblog_fullname, .microblog_time {
	font-size: 12px;
	line-height: 2em;
	font-weight: 500;
	color: var(--metaText);
	@media screen and (min-width: 35em) {
		font-size: 14px;
	}
	@media screen and (min-width: 50em) {
		font-size: 16px;
	}
	& a {
		color: var(--metaText);
	}
	& a:hover {
		color: var(--brand);
	}
	& a:active {
		color: var(--brandInteraction);
	}
}

.microblog_text {
	padding-top: var(--padding2);
	padding-bottom: var(--padding2);
	.snippet-post & p {
		font-size: 14px;
		line-height: 1.6;
		@media screen and (min-width: 35em) {
			font-size: 16px;
		}
		@media screen and (min-width: 50em) {
			font-size: 20px;
		}
		& strong {
			font-weight: 700;
		}
		& a {
			color: var(--primaryText);
		}
		& a:hover {
			color: var(--brand);
		}
		& a:active {
			color: var(--brandInteraction);
		}
	}
	& > p:first-child {
		margin-top: 0;
	}
	& > p:last-child {
		margin-bottom: 0;
	}
}