.card {
	background-color: white;
	border-radius: var(--rounded-xl);
	position: relative;
	box-shadow: var(--box-shadow);

	.hero-image {
		width: 100%;
		height: calc(36 * var(--spacing));
		border-top-left-radius: var(--radius-md);
		border-top-right-radius: var(--radius-md);
		object-fit: cover;

		&.--lg {
			height: calc(48 * var(--spacing));
		}
	}

	.status {
		position: absolute;
		top: calc(3 * var(--spacing));
		right: calc(3 * var(--spacing));
	}

	&.--padding { padding: calc(4 * var(--spacing)) }

	&.--has-header {
		display: flex;
		flex-direction: column;

		header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: calc(2 * var(--spacing)) calc(3 * var(--spacing));
			border-bottom: 1px solid var(--color-neutral-200);

			h1, h2, h3, h4, h5, h6 { margin-bottom: 0 }
		}

		.body {
			flex-grow: 1;
			padding: calc(3 * var(--spacing));
		}

		footer {
			padding: calc(3 * var(--spacing));
			padding-top: 0;

			.btn {
				width: 100%;
			}
		}
	}
}

@media (width < 40rem) {
	.card.--no-mobile {
		background-color: unset;
		border: unset;
		border-radius: unset;
		box-shadow: unset;
	}
}