.cg-post-hero {
	--cg-post-hero-outer-bg: #b4202a;
	--cg-post-hero-card-bg: #fbfbfb;
	--cg-post-hero-accent: #b4202a;
	--cg-post-hero-border: #e8e8e8;
	--cg-post-hero-lede-bg: #f7f7f8;
	--cg-post-hero-lede-border: #ededed;
	--cg-post-hero-text: #171717;
	--cg-post-hero-muted: #666666;
	--cg-post-hero-radius: 12px;
	--cg-post-hero-pad: 18px;
	--cg-post-hero-gap: 18px;
	--cg-post-hero-left: 56%;
	--cg-post-hero-right: 44%;
	--cg-post-hero-deck-max: 540px;
	--cg-post-hero-avatar: 76px;
	--cg-post-hero-avatar-mobile: 72px;
	--cg-post-hero-image-min-h: 380px;
	--cg-post-hero-image-radius: 12px;
	background: var(--cg-post-hero-outer-bg) !important;
	padding: 20px 0;
	font-family: "Inter", sans-serif;
}

.cg-post-hero,
.cg-post-hero *,
.cg-post-hero *::before,
.cg-post-hero *::after {
	box-sizing: border-box;
}

.cg-post-hero a {
	color: inherit;
	text-decoration: none;
}

.cg-post-hero img,
.cg-post-hero video,
.cg-post-hero canvas {
	display: block;
	max-width: 100%;
	height: auto;
	overflow: clip !important;
}

@supports not (overflow: clip) {
	.cg-post-hero img,
	.cg-post-hero video,
	.cg-post-hero canvas {
		overflow: hidden !important;
	}
}

.cg-post-hero__inner {
	max-width: 1248px;
	margin: 0 auto;
	padding: 0 16px;
}

.cg-post-hero__card {
	background: var(--cg-post-hero-card-bg) !important;
	border: 1px solid var(--cg-post-hero-border);
	border-radius: var(--cg-post-hero-radius);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
	padding: var(--cg-post-hero-pad);
	display: grid;
	gap: var(--cg-post-hero-gap);
	grid-template-columns: minmax(340px, var(--cg-post-hero-left)) minmax(300px, var(--cg-post-hero-right));
	grid-template-areas:
		"cats media"
		"title media"
		"deck media"
		"meta media";
	align-items: stretch;
}

.cg-post-hero__card.image-top {
	grid-template-columns: 1fr;
	grid-template-areas:
		"cats"
		"title"
		"deck"
		"media"
		"meta";
}

.cg-post-hero__cats {
	grid-area: cats;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.cg-post-hero__cats a {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--cg-post-hero-accent) !important;
	border: 1px solid var(--cg-post-hero-accent) !important;
	color: #ffffff !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.cg-post-hero__title {
	grid-area: title;
	margin: 0.2em 0 0.1em;
	font-family: "DM Sans", sans-serif;
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.012em;
	color: var(--cg-post-hero-text);
}

.cg-post-hero__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 10px;
	border-radius: 2px;
	opacity: 0.75;
	background: linear-gradient(90deg, var(--cg-post-hero-accent), #d96a72);
}

.cg-post-hero__deck {
	grid-area: deck;
	max-width: var(--cg-post-hero-deck-max);
	background: var(--cg-post-hero-lede-bg);
	border: 1px solid var(--cg-post-hero-lede-border);
	border-radius: 14px;
	padding: 16px 18px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
	color: var(--cg-post-hero-text);
	font-size: clamp(17px, 1.9vw, 19px);
	font-weight: 500;
	line-height: 1.62;
}

.cg-post-hero__deck p {
	margin: 0;
}

.cg-post-hero__deck--empty {
	opacity: 0.85;
}

.cg-post-hero__media {
	grid-area: media;
	position: relative;
	overflow: visible;
	border-radius: var(--cg-post-hero-image-radius);
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cg-post-hero-image-min-h);
}

.cg-post-hero__media-frame {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--cg-post-hero-image-radius);
	overflow: hidden;
	background: transparent;
}

.cg-post-hero__media.fit-contain .cg-post-hero__image {
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
	border-radius: inherit;
}

.cg-post-hero__media.fit-cover .cg-post-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
}

.cg-post-hero__meta {
	grid-area: meta;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 10px;
}

.cg-post-hero__avatars {
	display: inline-flex;
	align-items: center;
}

.cg-post-hero__avatar {
	width: var(--cg-post-hero-avatar);
	height: var(--cg-post-hero-avatar);
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	border: 2px solid var(--cg-post-hero-accent);
	outline: 5px solid #ffffff;
	background: #ffffff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
	position: relative;
	display: inline-flex;
}

.cg-post-hero__avatars .cg-post-hero__avatar + .cg-post-hero__avatar {
	margin-left: -14px;
}

.cg-post-hero__avatars--floater {
	display: none;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%) translateY(50%);
	z-index: 3;
}

.cg-post-hero__avatar-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 50% !important;
}

.cg-post-hero__meta-texts {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cg-post-hero__author-line {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.cg-post-hero__author-prefix {
	color: #444444;
	font-weight: 500;
}

.cg-post-hero__author-name {
	font-weight: 700;
}

.cg-post-hero__dates {
	font-size: 13px;
	color: var(--cg-post-hero-muted);
}

.cg-post-hero__date-updated {
	margin-top: 2px;
}

@media (max-width: 980px) {
	.cg-post-hero__card {
		grid-template-columns: 1fr;
		grid-template-areas:
			"cats"
			"title"
			"deck"
			"media"
			"meta";
	}

	.cg-post-hero__media {
		min-height: unset;
	}

	.cg-post-hero__media.fit-cover .cg-post-hero__image {
		height: auto;
	}

	.cg-post-hero__meta {
		width: 100%;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		position: relative;
		z-index: 2;
		margin-top: 0;
		padding-top: calc((var(--cg-post-hero-avatar-mobile) / 2) + 16px);
		gap: 12px;
	}

	.cg-post-hero__meta-texts,
	.cg-post-hero__author-line,
	.cg-post-hero__dates {
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.cg-post-hero__avatar {
		width: var(--cg-post-hero-avatar-mobile);
		height: var(--cg-post-hero-avatar-mobile);
		margin-top: 0;
	}

	.cg-post-hero__meta > .cg-post-hero__avatars:not(.cg-post-hero__avatars--floater) {
		display: none;
	}

	.cg-post-hero__avatars--floater {
		display: block;
		bottom: 0;
		transform: translateX(-50%) translateY(50%);
	}

	.cg-post-hero__avatars .cg-post-hero__avatar + .cg-post-hero__avatar {
		margin-left: -12px;
	}
}