/*
 * Tears of Metal Wiki Patterns
 * Character card v1.1.0
 */

.tom-character-card {
	border: 1px solid #777;
	background: #fff;
	margin: 24px 0 32px;
}

.tom-character-card__header {
	background: #e5e5e5;
	border-bottom: 1px solid #777;
	padding: 10px 14px;
}

.tom-character-card__name {
	margin: 0 !important;
	font-size: 1.5rem;
	line-height: 1.35;
}

.tom-character-card__subname {
	margin: 2px 0 0 !important;
	font-size: 0.9rem;
	color: #555;
}

.tom-character-card__body {
	gap: 0 !important;
	margin: 0 !important;
	align-items: stretch !important;
}

.tom-character-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
}

.tom-character-card__image {
	width: 100%;
	margin: 0 !important;
}

.tom-character-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 900 / 560;
	object-fit: cover;
	border: 1px solid #c8c8c8;
}

.tom-character-card__stats {
	border-left: 1px solid #aaa;
}

.tom-character-card__table {
	margin: 0 !important;
	height: 100%;
}

.tom-character-card__table table {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	margin: 0;
}

.tom-character-card__table th,
.tom-character-card__table td {
	border: 1px solid #c8c8c8;
	padding: 8px 10px;
	vertical-align: middle;
}

.tom-character-card__table th {
	width: 46%;
	background: #efefef;
	font-weight: 700;
	text-align: center;
}

.tom-character-card__table tr:first-child th,
.tom-character-card__table tr:first-child td {
	border-top: 0;
}

.tom-character-card__table tr:last-child th,
.tom-character-card__table tr:last-child td {
	border-bottom: 0;
}

.tom-character-card__table th:first-child {
	border-left: 0;
}

.tom-character-card__table td:last-child {
	border-right: 0;
}

@media (max-width: 781px) {
	.tom-character-card__body {
		display: block;
	}

	.tom-character-card__media,
	.tom-character-card__stats {
		width: 100%;
	}

	.tom-character-card__stats {
		border-left: 0;
		border-top: 1px solid #aaa;
	}

	.tom-character-card__image {
		max-width: 520px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}