@layer components {
	.card {
		--column-gap: 0;
		--top-padding: var(--column-gap);
		--right-padding: var(--column-gap);
		--bottom-padding: var(--column-gap);
		--left-padding: var(--column-gap);

		display: grid;
		grid-template-columns:
			[full-start] var(--left-padding)
			[main-start] auto
			[main-end] var(--right-padding)
			[full-end];
		grid-auto-rows: minmax(max-content, 0);
		height: 100%;
	}

	.card:before,
	.card:after {
		content: '';
		grid-column: main;
	}

	.card:before {
		grid-row: 1;
		height: var(--top-padding);
	}

	.card:after {
		height: var(--bottom-padding);
	}

	.card > * {
		grid-column: main;
	}

	.card > .poster {
		width: 100%;
	}

	.card > .poster.full-bleed {
		grid-column: full;
		grid-row: 1;
	}

	.card figcaption {
		display: none !important;
	}
}