:root {
	--ml-card-background-color: var(--ml-background-color);
	--ml-card-border-color: var(--ml-border-color);
	--ml-card-border-radius:  var(--scale8-1);
	--ml-card-border-width: 1px;
	--ml-card-padding: var(--gutter-margin-xs);
	--ml-card-box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.15), 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
	--ml-card-image-cover-width: 160px;
	--ml-card-image-cover-height: 200px;
}

.ml-card {
	background-color: var(--ml-card-background-color);
	border-style: solid;
	border-color: var(--ml-card-border-color);
	border-radius: var(--ml-card-border-radius);
	border-width: var(--ml-card-border-width);
	padding: var(--ml-card-padding);
}

.ml-card.card-content {
	background-color: var(--ml-background-content);
	padding: var(--gutter-margin-s);
}

.ml-card.card-content-view {
	display: block;
	width: 100%;
	padding: var(--gutter-margin);
	background-color: var(--ml-background-view);
	height: auto;
	border: 1px solid var(--ml-border-color);
	border-radius: var(--scale8-1);
	margin: 0 auto;
	box-sizing: border-box;
}

.ml-card.card-error {
	border-color: var(--ml-error-color);
	background-color: var(--ml-error-bright-color);
}

@media all and (max-width: 904px) {
	.ml-card.card-content-view {
		padding: var(--gutter-margin-s);
	}
}

@media all and (max-width: 599px) {
	.ml-card.card-content-view {
		margin: 0;
		width: 100%;
		padding: var(--gutter-margin-s) var(--gutter-margin-xs);
		border-radius: 0;
	}

	.ml-card.card-content {
		padding: var(--gutter-margin-xs);
	}
}