@layer components {
	.klt-story-card {
		display: grid;
		gap: var(--klt-space-s);
		min-width: 0;
	}

	.klt-story-card__media {
		display: block;
		overflow: hidden;
	}

	.klt-story-card__image {
		display: block;
		width: 100%;
		aspect-ratio: var(--klt-story-media-ratio, 16 / 9);
		object-fit: cover;
	}

	.klt-story-card__body,
	.klt-story-card__meta,
	.klt-story-card__labels {
		display: flex;
		gap: var(--klt-space-xs);
	}

	.klt-story-card__body {
		align-items: flex-start;
		flex-direction: column;
	}

	/*
	 * Text placed over media needs an opaque neutral reading surface when no
	 * appearance profile is installed. A profile can paint this relationship
	 * differently, but the component cannot leave contrast to the photograph.
	 */
	.klt-story-card--title-on-media .klt-story-card__body {
		padding: var(--klt-space-s);
		background: Canvas;
		color: CanvasText;
	}

	.klt-story-card__title,
	.klt-story-card__eyebrow,
	.klt-story-card__excerpt,
	.klt-story-card__excerpt > p {
		margin: 0;
	}

	.klt-story-card__meta,
	.klt-story-card__labels {
		flex-wrap: wrap;
		align-items: center;
	}

	.klt-story-card__category {
		display: inline-flex;
		align-items: center;
		min-block-size: 24px;
	}

	.klt-story-card--in-rows:not(.klt-story-card--no-media),
	.klt-story-card--in-split-feed:not(.klt-story-card--no-media),
	.klt-story-card--in-split-grid:not(.klt-story-card--no-media) {
		grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
	}

	.klt-story-card--in-journal:not(.klt-story-card--no-media) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	}

	.klt-story-card--in-journal:not(.klt-story-card--no-media):not(.klt-story-card--media-first) .klt-story-card__body {
		grid-column: 1;
		grid-row: 1;
	}

	.klt-story-card--in-journal:not(.klt-story-card--no-media):not(.klt-story-card--media-first) .klt-story-card__media {
		grid-column: 2;
		grid-row: 1;
	}

	.klt-story-collection--split-grid:not([data-klt-carousel]) .klt-story-card:first-child:not(.klt-story-card--no-media) {
		grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
		align-items: center;
	}

	.klt-story-card--in-feature:not(.klt-story-card--no-media) {
		grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr);
		align-items: center;
	}

	.klt-story-card--in-feature .klt-story-card__body {
		justify-content: center;
	}

	.klt-story-card--in-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.klt-story-card--in-hero.klt-story-card--title-on-media > :is(.klt-story-card__media, .klt-story-card__body) {
		grid-area: 1 / 1;
	}

	.klt-story-card--in-hero.klt-story-card--title-on-media .klt-story-card__body {
		z-index: 1;
		align-self: end;
	}

	@media (max-width: 60rem) {
		.klt-story-card--in-feature:not(.klt-story-card--no-media),
		.klt-story-card--in-journal:not(.klt-story-card--no-media),
		.klt-story-collection--split-grid:not([data-klt-carousel]) .klt-story-card:first-child:not(.klt-story-card--no-media) {
			grid-template-columns: minmax(0, 1fr);
		}

		.klt-story-card--in-journal:not(.klt-story-card--no-media) > :is(.klt-story-card__media, .klt-story-card__body) {
			grid-column: 1;
		}

		.klt-story-card--in-journal:not(.klt-story-card--no-media) .klt-story-card__media {
			grid-row: 1;
		}

		.klt-story-card--in-journal:not(.klt-story-card--no-media) .klt-story-card__body {
			grid-row: 2;
		}
	}

	@media (max-width: 40rem) {
		.klt-story-card--in-rows:not(.klt-story-card--no-media),
		.klt-story-card--in-split-feed:not(.klt-story-card--no-media) {
			grid-template-columns: minmax(0, 1fr);
		}
	}
}