Predefinição:Infobox Monstro/styles.css

/* =========================================================
   SPLIXMMO WIKI
   INFOBOX — MONSTRO
   ========================================================= */

.splix-infobox-monstro {
	float: right;

	width: 300px;

	margin: 0 0 24px 32px;

	background: #ffffff;

	border: 1px solid #e1e7ee;

	border-radius: 18px;

	overflow: hidden;

	box-shadow:
		0 10px 28px rgba(64, 100, 140, 0.11);

	color: #29445f;
}


/* =========================================================
   LIMPEZA DO PARSER
   ========================================================= */

.splix-infobox-monstro p {
	margin: 0 !important;
	padding: 0 !important;
}

.splix-infobox-monstro br {
	display: none;
}


/* =========================================================
   CABEÇALHO
   ========================================================= */

.splix-infobox-monstro .splix-infobox-header {
	padding: 15px 18px 14px;

	text-align: center;

	background:
		linear-gradient(
			135deg,
			#4bbcff 0%,
			#779fe9 52%,
			#ff8b7e 100%
		);
}

.splix-infobox-monstro .splix-infobox-title {
	color: #ffffff;

	font-size: 19px;

	font-weight: 800;

	line-height: 1.2;

	text-shadow:
		0 1px 2px rgba(45, 65, 110, 0.18);
}

.splix-infobox-monstro .splix-infobox-subtitle {
	margin-top: 4px;

	color: rgba(255, 255, 255, 0.92);

	font-size: 10px;

	font-weight: 800;

	letter-spacing: 0.12em;

	text-transform: uppercase;
}


/* =========================================================
   IMAGEM
   ========================================================= */

.splix-infobox-monstro .splix-infobox-image {
	display: flex;

	align-items: center;

	justify-content: center;

	padding: 20px;

	background:
		linear-gradient(
			180deg,
			#f8fbff,
			#ffffff
		);

	border-bottom: 1px solid #e3edf4;
}

.splix-infobox-monstro .splix-infobox-image img {
	display: block;

	max-width: 180px;

	max-height: 200px;

	width: auto;

	height: auto;

	object-fit: contain;
}


/* =========================================================
   CORPO
   ========================================================= */

.splix-infobox-monstro .splix-infobox-body {
	display: block;

	background: #ffffff;
}


/* =========================================================
   LINHAS
   ========================================================= */

.splix-infobox-monstro .splix-infobox-row {
	display: grid;

	grid-template-columns:
		108px minmax(0, 1fr);

	min-height: 38px;

	border-bottom:
		1px solid #e4edf5;
}

.splix-infobox-monstro .splix-infobox-label {
	display: flex;

	align-items: center;

	padding: 8px 11px;

	background: #f2f7fb;

	color: #466881;

	font-size: 12px;

	font-weight: 800;

	line-height: 1.3;
}

.splix-infobox-monstro .splix-infobox-value {
	display: flex;

	align-items: center;

	padding: 8px 12px;

	background: #ffffff;

	color: #36566e;

	font-size: 12.5px;

	line-height: 1.4;

	overflow-wrap: anywhere;
}

.splix-infobox-monstro .splix-infobox-value a {
	color: #259ee8;

	font-weight: 700;

	text-decoration: none;
}


/* =========================================================
   DROPS
   ========================================================= */

.splix-infobox-monstro .splix-infobox-section {
	border-top:
		1px solid #e3edf4;
}

.splix-infobox-monstro .splix-infobox-section-title {
	padding: 8px 12px;

	background:
		linear-gradient(
			90deg,
			#fff3f1,
			#f5f9ff
		);

	color: #a45d59;

	font-size: 11px;

	font-weight: 900;

	letter-spacing: 0.09em;

	text-transform: uppercase;
}

.splix-infobox-monstro .splix-infobox-section-content {
	padding: 11px 14px;

	background: #ffffff;

	color: #466177;

	font-size: 12.5px;

	line-height: 1.55;
}

.splix-infobox-monstro .splix-infobox-section-content ul {
	margin: 0;

	padding-left: 18px;
}

.splix-infobox-monstro .splix-infobox-section-content li {
	margin: 3px 0;
}


/* =========================================================
   DESCRIÇÃO
   ========================================================= */

.splix-infobox-monstro .splix-infobox-description {
	padding: 14px 16px;

	background:
		linear-gradient(
			135deg,
			#f5fbff,
			#fff8f7
		);

	color: #587187;

	font-size: 12.5px;

	line-height: 1.55;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 720px) {

	.splix-infobox-monstro {
		float: none;

		width: 100%;

		margin: 0 0 24px 0;
	}

	.splix-infobox-monstro .splix-infobox-row {
		grid-template-columns:
			105px minmax(0, 1fr);
	}

}