.card {
	--card-padding-block: 1rem;
	--card-padding-inline: 2rem;

	padding-block: var(--card-padding-block);
	padding-inline: var(--card-padding-inline);
	box-sizing: border-box;
	background-color: var(--container-color-background, var(--card-background-color));
}

.card > :last-child {
	margin-block-end: 0;
}

.card[data-mode="product"] {
	/* Supercede container background-color */
	background-color: var(--color-white);
	display: block;
	box-shadow: var(--elevation-xs);
	text-decoration: none;
	color: unset;
}

a.card:hover {
	box-shadow: var(--elevation-m);
}

.card:is(
	[data-mode="image"],
	[data-mode="product"]
) img {
	/* Reset the `width` and `height` attributes of the `<img>` for both image-type cards */
	width: 100%;
	height: auto;
}

.card[data-mode="image"] {
	--card-padding-block: 1.25rem;
	--card-padding-inline: 1.25rem;
}

.card[data-mode="image"] picture {
	display: block;
	width: calc(100% + var(--card-padding-inline)  + var(--card-padding-inline)); /* Recalculate the width of this container since we're using negative inline margins */
	margin-block-start: calc(var(--card-padding-block) * -1);
	margin-inline-start: calc(var(--card-padding-inline) * -1);
	margin-inline-end: calc(var(--card-padding-inline) * -1);
}

.card[data-mode="image"] > picture:only-child {
	margin-block-end: calc(var(--card-padding-block) * -1);
}

.card[data-mode="product"] {
	--card-padding-block: 1.25rem;
	--card-padding-inline: 1.25rem;
}

.card .call-to-action[data-mode="alternate"] {
	text-align: end;
}

.card[data-mode="product"] .call-to-action {
	padding-block: 0.75rem;
	padding-inline: 1rem;
	margin-inline: calc(var(--card-padding-inline) * -1);
	margin-block-end: calc(var(--card-padding-block) * -1);
	background-color: var(--color-brown-600);
	color: var(--color-white);
	transition-property: background-color;
	transition-duration: var(--speed-blink);
	text-align: center;
	display: block;
}

.card[data-mode="product"] .call-to-action:hover {
	background-color: var(--color-black-950);
}

.card[data-mode="shadow"]{
	--card-padding-block: 1.25rem;
  --card-padding-inline: 1.25rem;
	background-color: var(--color-white);
	display: block;
	box-shadow: var(--elevation-xs);
	text-decoration: none;
	color: unset;
}

.card[data-theme="default"] {
	background-color: var(--color-white);
}

.card[data-theme="alternate"] {
	background-color: var(--color-surface-lighter);
}

.card[data-theme="stripped"] {
	background-color: transparent;
}

.card[data-spacing="none"]:not(a):is(
	[data-mode="image"],
	[data-mode="plain"]
) {
	padding: 0;
}

.card .heading {
	--heading-margin-block-end: 0.5rem;
}

@media (max-width: 30rem) {
	.card:is([data-mode="image"], [data-mode="shadow"]:has(picture, img)) > .heading {
		--heading-margin-block-start: 1rem;
	}
}