.featured-story {
	--border-color: var(--color-primary-stroke);
	--content-color: var(--color-primary);
	background-color: var(--color-white);
	color: var(--content-color);
	container-name: card;
	container-type: inline-size;
	margin-inline: auto;
	width: min(var(--site-width-wide), 100%);

	.featured-story__inner {
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius--sm);
		box-shadow: 0 4px 25px 0 #0000001f;
		contain: paint;
		display: grid;
		gap: 42px;

		@media (width >= 720px) {
			grid-template-columns: 1.25fr 2fr;
		 }

		.featured-story__image {
			contain: paint;

			img {
				height: 100%;
				object-fit: cover;
				width: 100%;
			}
		}

		.featured-story__content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-block-end: var(--vspace-sm);
			padding-inline: 23px;

			@media (width >= 720px) {
				padding-block: var(--vspace-md);
				padding-inline: 0 48px;
			}

			.tags {
				--tag-bg: #eff2f4;
				margin-inline: auto;
				padding-inline: 20px;
				width: min(1040px, 100%);
			}

			.tags__list {
				display: flex;
				flex-flow: row wrap;
				gap: 8px;
				list-style: none;
				margin: 0;
				padding: 0;
			}

			.tag {
				background-color: var(--tag-bg);
				border-radius: 6px;
				color: var(--color-primary);
				font-size: 12px;
				line-height: 1.6666666667;
				padding: 2px 5px;
			}

			.tag a {
				color: currentColor;
			}

			.featured-story__header {
				font-size: 24px;
				line-height: 1.1666666667;
				margin-block-start: 16px;
			}

			.featured-story__cta {
				margin-block-start: 36px;
			}
		}
	}
}