/*** CardComponent ***/

.som.card-component {
	display: grid;
	grid-template: 5cm 1.1cm 0.8cm / 8cm;
	gap: 0.2cm;
}

.som.card-component > .card-title-component {
	font-size: var(--som-font-size-base);
}

.som.card-component > .card-caption-component {
	material-emissive: var(--som-light-base-color);
	font-size: var(--som-font-size-0);
}

.dom.card-component {
	background-color: var(--dom-background-color);
	border: solid var(--dom-container-border-width) var(--dom-light-secondary-color);
	border-radius: var(--dom-container-border-radius);
}

.dom.card-component > .main-component,
.dom.card-component > .card-title-component,
.dom.card-component > .card-caption-component {
	padding-top: var(--dom-inner-element-padding);
	padding-left: var(--dom-inner-element-padding);
	padding-right: var(--dom-inner-element-padding);
}

.dom.card-component > .main-component {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: calc(100% - (var(--dom-inner-element-padding) * 2));
	padding-bottom: var(--dom-inner-element-padding);
	max-height: 75vw;
}

.dom.card-component > .main-component img {
	max-width: 100%;
}

.dom.card-component > .card-title-component,
.dom.card-component > .card-caption-component {
	display: block;
}

.dom.card-component > .card-title-component {
	border-top: dashed 1px var(--dom-primary-color);
	font-size: var(--dom-font-size-base);
}

.dom.card-component > .card-caption-component {
	font-weight: var(--dom-font-size-base);
	padding-bottom: var(--dom-inner-element-padding);
	min-height: 2em;
}