/*
 * MMA blocks.
 *
 * Every colour is a custom property on the block root, so a theme re-skins the
 * set by redefining them on :root, on a wrapper, or per block. Blocks that draw
 * their own panel (fight card, rankings, bracket, next fight, clock) are dark
 * islands: they read the same on a light or a dark page.
 */

.mma-b {
	--mma-red: #e5192c;
	--mma-red-deep: #8f0f1c;
	--mma-blue: #2f6fed;
	--mma-card: #16161c;
	--mma-card-2: #1f2027;
	--mma-on-card: #ffffff;
	--mma-muted: #8a9094;
	--mma-line: rgba(255, 255, 255, 0.09);
	--mma-win: #2fa457;
	--mma-gold: #f5c542;
	box-sizing: border-box;
}

.mma-b *,
.mma-b *::before,
.mma-b *::after {
	box-sizing: border-box;
}

.mma-b a {
	color: inherit;
	text-decoration: none;
}

ul.mma-b,
ol.mma-b,
.mma-b ul,
.mma-b ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mma-b img {
	max-width: 100%;
	height: auto;
	border: 0;
}

/* Names: the heavy italic capitals the whole product is set in. The 0.12em of
   right padding is for the slant — an italic glyph overhangs its own box, and a
   clipped or ellipsised name would otherwise lose the edge of its last letter. */
.mma-b .mma-b-name {
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	line-height: 1.15;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 0.12em;
}

.mma-b .mma-b-face {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 0;
	background: var(--mma-card-2);
	display: block;
}

.mma-b .mma-b-face--none {
	background-color: var(--mma-card-2);
	background-image: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.2) 0 21%, transparent 22%), radial-gradient(circle at 50% 108%, rgba(255, 255, 255, 0.15) 0 45%, transparent 46%);
}

.mma-b .mma-b-meter {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: rgba(128, 128, 140, 0.22);
	overflow: hidden;
}

.mma-b .mma-b-meter > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--mma-red-deep), var(--mma-red));
}

/* Outcome pills */
.mma-b .mma-b-outcome {
	display: inline-block;
	min-width: 40px;
	padding: 3px 10px;
	border-radius: 999px;
	background: #5a5d68;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: 0.5px;
	text-align: center;
	text-transform: uppercase;
	flex: 0 0 auto;
}

.mma-b .mma-b-outcome.is-win { background: var(--mma-win); }
.mma-b .mma-b-outcome.is-loss { background: var(--mma-red); }
.mma-b .mma-b-outcome.is-none { display: none; }

/* ------------------------------------------------------------------ field */

.mma-b-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.mma-b-field .mma-b-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mma-muted);
	line-height: 1.2;
}

.mma-b-field .mma-b-value {
	font-size: 16px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------- record */

.mma-b-record {
	display: inline-flex;
	gap: 4px;
	align-items: stretch;
	line-height: 1;
}

.mma-b-record--line {
	font-weight: 700;
	font-style: italic;
}

.mma-b-record .mma-b-rec {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 4px 8px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.mma-b-record .mma-b-rec b {
	font-size: 13px;
	font-weight: 700;
	font-style: italic;
}

.mma-b-record .mma-b-rec i {
	font-size: 9px;
	font-weight: 700;
	font-style: normal;
	opacity: 0.75;
}

.mma-b-record .mma-b-rec.is-win { background: var(--mma-red); }
.mma-b-record .mma-b-rec.is-loss { background: #3d3f4a; }

.mma-b-record--big {
	gap: 10px;
}

.mma-b-record--big .mma-b-rec {
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 74px;
	padding: 12px 14px 10px;
	border-radius: 12px;
}

.mma-b-record--big .mma-b-rec b {
	font-size: 34px;
	line-height: 0.9;
}

.mma-b-record--big .mma-b-rec i {
	font-size: 10px;
	letter-spacing: 1.2px;
}

/* ------------------------------------------------- finishes / skill stats */

.mma-b-finishes {
	display: grid;
	gap: 14px;
}

.mma-b-finishes .mma-b-fin-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 6px;
}

.mma-b-finishes .mma-b-fin-name {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.mma-b-finishes .mma-b-fin-num {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	white-space: nowrap;
}

.mma-b-finishes .mma-b-fin-num b {
	font-size: 16px;
	font-style: italic;
}

.mma-b-finishes .mma-b-fin-num i {
	font-size: 12px;
	font-style: normal;
	color: var(--mma-muted);
}

.mma-b-finishes .mma-b-fin.is-sub .mma-b-meter > span { background: linear-gradient(90deg, #1d3f8a, var(--mma-blue)); }
.mma-b-finishes .mma-b-fin.is-dec .mma-b-meter > span { background: linear-gradient(90deg, #4a4d58, #9aa0ab); }

/* --------------------------------------------------------------- win rate */

.mma-b-winrate {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mma-b-winrate .mma-b-meter {
	flex: 1 1 auto;
	height: 5px;
	background: rgba(255, 255, 255, 0.25);
}

.mma-b-winrate .mma-b-winrate-num {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- portrait */

.mma-b-portrait {
	margin: 0;
	line-height: 0;
	position: relative;
}

.mma-b-portrait img {
	display: block;
	width: 100%;
}

/* The full-body photo is three times as tall as it is wide. Cropped from the
   top it is a fighter from the waist up, which is the shot a card wants. */
.mma-b-portrait--stance img {
	aspect-ratio: var(--mma-portrait-ratio, 3 / 4);
	height: auto;
	object-fit: cover;
	object-position: 50% 0;
	-webkit-mask-image: linear-gradient(#000 80%, transparent);
	mask-image: linear-gradient(#000 80%, transparent);
	filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}

.mma-b-portrait--photo img {
	aspect-ratio: var(--mma-portrait-ratio, 3 / 4);
	object-fit: cover;
	object-position: 50% 0;
}

.mma-b-portrait--face {
	width: var(--mma-face, 64px);
}

.mma-b-portrait--face img {
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 10%;
}

.mma-b-portrait--none {
	display: grid;
	place-items: center;
	aspect-ratio: var(--mma-portrait-ratio, 3 / 4);
	line-height: 1;
}

.mma-b-portrait--none span {
	font-size: clamp(54px, 9vw, 110px);
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.04em;
	color: rgba(255, 255, 255, 0.09);
	text-transform: uppercase;
}

/* ------------------------------------------------------------ flag / rank */

.mma-b-flag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}

.mma-b-flag img {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
}

.mma-b-flag .mma-b-flag-name {
	font-weight: 700;
	font-style: italic;
}

.mma-b-rank {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	font-size: 11px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.6px;
	line-height: 1.3;
	text-transform: uppercase;
}

.mma-b-rank.is-champion {
	border-color: transparent;
	background: linear-gradient(120deg, #b8860b, var(--mma-gold));
	color: #1a1305;
}

/* ---------------------------------------------------------------- history */

.mma-b-history .mma-b-hist-row {
	display: grid;
	grid-template-columns: 52px minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(128, 128, 140, 0.22);
}

.mma-b-history .mma-b-hist-opp {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
}

.mma-b-history .mma-b-hist-opp > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 0.12em;
}

.mma-b-history .mma-b-hist-opp .mma-b-face {
	width: 36px;
	height: 36px;
	padding: 0;
}

.mma-b-history .mma-b-hist-event {
	min-width: 0;
	font-size: 13px;
	line-height: 1.35;
}

.mma-b-history .mma-b-hist-event small {
	display: block;
	font-size: 11px;
	color: var(--mma-muted);
}

.mma-b-history .mma-b-hist-detail {
	font-size: 12px;
	color: var(--mma-muted);
	text-align: right;
	line-height: 1.4;
}

.mma-b-history .mma-b-hist-detail em {
	font-style: normal;
	font-weight: 700;
	color: #b8860b;
}

.mma-b-history a:hover {
	color: var(--mma-red);
}

/* ------------------------------------------------------------- next fight */

.mma-b-next {
	display: grid;
	gap: 12px;
	padding: 18px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--mma-card) 0%, #2a1116 100%);
	color: var(--mma-on-card);
}

.mma-b-next .mma-b-next-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mma-red);
}

.mma-b-next .mma-b-next-opp {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	line-height: 1.15;
}

.mma-b-next .mma-b-next-opp small {
	font-size: 12px;
	color: var(--mma-muted);
}

.mma-b-next .mma-b-next-opp i {
	font-size: 12px;
	color: var(--mma-muted);
	white-space: nowrap;
}

.mma-b-next .mma-b-next-opp .mma-b-face {
	width: 54px;
	height: 54px;
}

.mma-b-next .mma-b-next-event {
	display: grid;
	gap: 3px;
	padding-top: 12px;
	border-top: 1px solid var(--mma-line);
	font-size: 13px;
}

.mma-b-next .mma-b-next-event b {
	font-style: italic;
	text-transform: uppercase;
}

.mma-b-next .mma-b-next-event span {
	font-size: 12px;
	color: var(--mma-muted);
}

.mma-b-next a:hover b,
.mma-b-next a.mma-b-next-opp:hover {
	color: var(--mma-red);
}

/* ------------------------------------------------------------ event field */

.mma-b-efield {
	display: inline;
}

/* -------------------------------------------------------------- countdown */

.mma-b-countdown--chip,
.mma-b-countdown--compact {
	display: inline-block;
	border-radius: 999px;
	background: var(--mma-red);
	color: #fff;
	font-weight: 700;
	font-style: italic;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

.mma-b-countdown--chip {
	padding: 6px 16px;
	font-size: 12px;
	letter-spacing: 0.6px;
}

.mma-b-countdown--compact {
	padding: 2px 9px 3px;
	font-size: 9px;
	letter-spacing: 0.4px;
}

.mma-b-countdown--chip.is-done,
.mma-b-countdown--compact.is-done {
	background: #3a3a44;
}

.mma-b-countdown--clock {
	display: inline-grid;
	grid-template-columns: repeat(4, minmax(64px, 1fr));
	gap: 8px;
}

.mma-b-countdown--clock .mma-b-clock-cell {
	display: grid;
	gap: 6px;
	justify-items: center;
	padding: 12px 8px 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--mma-line);
	color: var(--mma-on-card);
}

.mma-b-countdown--clock b {
	font-size: 30px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.mma-b-countdown--clock i {
	font-size: 9px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--mma-muted);
}

/* --------------------------------------------------------------- face-off */

.mma-b-faceoff {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: end;
	color: #fff;
	position: relative;
}

.mma-b-faceoff .mma-b-fo-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	position: relative;
	text-align: center;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

/* The corner colours, as a glow each fighter stands in front of. */
.mma-b-faceoff .mma-b-fo-side::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 8%;
	width: 120%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(229, 25, 44, 0.5), rgba(229, 25, 44, 0) 72%);
	pointer-events: none;
}

.mma-b-faceoff .mma-b-fo-side.is-two::before {
	background: radial-gradient(closest-side, rgba(47, 111, 237, 0.46), rgba(47, 111, 237, 0) 72%);
}

.mma-b-faceoff .mma-b-fo-img {
	position: relative;
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

.mma-b-faceoff .mma-b-fo-img.is-stance {
	aspect-ratio: 5 / 7;
	-webkit-mask-image: linear-gradient(#000 74%, transparent 99%);
	mask-image: linear-gradient(#000 74%, transparent 99%);
	filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.55));
}

.mma-b-faceoff .mma-b-fo-img.is-photo,
.mma-b-faceoff .mma-b-fo-img.is-none {
	aspect-ratio: 1;
	width: 62%;
	margin: 16% 0 14%;
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16), 0 18px 40px rgba(0, 0, 0, 0.5);
	background: var(--mma-card-2);
}

.mma-b-faceoff .mma-b-fo-side.is-loser .mma-b-fo-img {
	filter: grayscale(0.85) brightness(0.7);
}

.mma-b-faceoff a.mma-b-fo-side:hover .mma-b-fo-name {
	color: var(--mma-red);
}

.mma-b-faceoff .mma-b-fo-text {
	position: relative;
	display: grid;
	gap: 6px;
	justify-items: center;
	margin-top: -14%;
	padding: 0 6px;
	min-width: 0;
	max-width: 100%;
}

.mma-b-faceoff .mma-b-fo-name {
	display: block;
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	line-height: 0.98;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
	overflow-wrap: anywhere;
	transition: color 0.2s ease;
}

.mma-b-faceoff .mma-b-fo-name small {
	display: block;
	font-size: 0.42em;
	font-weight: 600;
	letter-spacing: 0.08em;
	opacity: 0.8;
	margin-bottom: 0.3em;
}

.mma-b-faceoff .mma-b-fo-rec {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	line-height: 1.4;
}

.mma-b-faceoff .mma-b-fo-mid {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 8px;
	justify-items: center;
	align-self: center;
	text-align: center;
}

.mma-b-faceoff .mma-b-fo-vs {
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	color: #fff;
	text-shadow: 0 0 30px rgba(229, 25, 44, 0.9), 0 2px 0 rgba(0, 0, 0, 0.4);
}

.mma-b-faceoff .mma-b-fo-belt {
	padding: 3px 10px;
	border-radius: 999px;
	background: linear-gradient(120deg, #b8860b, var(--mma-gold));
	color: #1a1305;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	white-space: nowrap;
}

.mma-b-faceoff .mma-b-fo-weight {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	white-space: nowrap;
}

/* hero */
.mma-b-faceoff--hero .mma-b-fo-side {
	width: 100%;
	max-width: 330px;
	justify-self: end;
}

.mma-b-faceoff--hero .mma-b-fo-side.is-two {
	justify-self: start;
}

.mma-b-faceoff--hero .mma-b-fo-mid {
	margin: 0 -18px;
}

.mma-b-faceoff--hero .mma-b-fo-vs {
	font-size: clamp(38px, 5.2vw, 76px);
}

.mma-b-faceoff--hero .mma-b-fo-name {
	font-size: clamp(20px, 2.6vw, 38px);
}

/* card */
.mma-b-faceoff--card .mma-b-fo-vs {
	font-size: 26px;
}

.mma-b-faceoff--card .mma-b-fo-mid {
	margin: 0 -8px;
}

.mma-b-faceoff--card .mma-b-fo-name {
	font-size: 17px;
}

.mma-b-faceoff--card .mma-b-fo-rec {
	font-size: 10px;
	padding: 2px 8px;
}

/* mini: two heads and a VS, for rows */
.mma-b-faceoff--mini {
	display: inline-flex;
	align-items: center;
	gap: 0;
}

.mma-b-faceoff--mini .mma-b-fo-side {
	width: 46px;
	flex: 0 0 auto;
}

.mma-b-faceoff--mini .mma-b-fo-side::before,
.mma-b-faceoff--mini .mma-b-fo-text {
	display: none;
}

.mma-b-faceoff--mini .mma-b-fo-img,
.mma-b-faceoff--mini .mma-b-fo-img.is-stance,
.mma-b-faceoff--mini .mma-b-fo-img.is-photo {
	width: 46px;
	aspect-ratio: 1;
	margin: 0;
	border-radius: 50%;
	-webkit-mask-image: none;
	mask-image: none;
	filter: none;
	background: var(--mma-card-2);
	box-shadow: 0 0 0 2px var(--mma-red);
}

.mma-b-faceoff--mini .mma-b-fo-side.is-two .mma-b-fo-img {
	box-shadow: 0 0 0 2px var(--mma-blue);
}

.mma-b-faceoff--mini .mma-b-fo-mid {
	margin: 0 -7px;
}

.mma-b-faceoff--mini .mma-b-fo-vs {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #0d0d11;
	font-size: 9px;
	text-shadow: none;
}

/* ----------------------------------------------------------------- result */

.mma-b-result {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.mma-b-result .mma-b-res-line {
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	line-height: 1.2;
}

.mma-b-result .mma-b-res-line i {
	font-size: 0.78em;
	font-weight: 600;
	text-transform: none;
	opacity: 0.6;
}

.mma-b-result .mma-b-res-winner {
	color: var(--mma-red);
}

.mma-b-result .mma-b-res-detail {
	font-size: 12px;
	color: var(--mma-muted);
}

/* ------------------------------------------------------------- fight card */

.mma-b-card {
	display: grid;
	gap: 28px;
}

.mma-b-card .mma-b-seg-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0 0 10px;
	border-bottom: 1px solid rgba(128, 128, 140, 0.25);
	font-size: 15px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	line-height: 1.2;
	position: relative;
}

.mma-b-card .mma-b-seg-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 46px;
	height: 3px;
	border-radius: 999px;
	background: var(--mma-red);
}

.mma-b-card .mma-b-seg-title span {
	font-size: 11px;
	font-style: normal;
	padding: 1px 8px;
	border-radius: 999px;
	background: rgba(128, 128, 140, 0.2);
}

.mma-b-card .mma-b-bouts {
	display: grid;
	gap: 10px;
}

.mma-b-card .mma-b-bout {
	padding: 14px 18px 16px;
	border-radius: 14px;
	background: var(--mma-card);
	color: var(--mma-on-card);
	border: 1px solid transparent;
}

.mma-b-card .mma-b-bout.is-title {
	background: linear-gradient(135deg, var(--mma-card) 55%, #33270c 100%);
	border-color: rgba(245, 197, 66, 0.35);
}

.mma-b-card .mma-b-bout-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mma-muted);
}

.mma-b-card .mma-b-tag {
	padding: 2px 9px;
	border-radius: 999px;
	color: #fff;
	background: var(--mma-red);
}

.mma-b-card .mma-b-tag.is-belt {
	background: linear-gradient(120deg, #b8860b, var(--mma-gold));
	color: #1a1305;
}

.mma-b-card .mma-b-bout-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
}

.mma-b-card .mma-b-corner {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	transition: opacity 0.2s ease;
}

.mma-b-card .mma-b-corner.is-two {
	flex-direction: row-reverse;
	text-align: right;
}

.mma-b-card .mma-b-corner.is-empty {
	color: var(--mma-muted);
	font-style: italic;
}

.mma-b-card .mma-b-corner .mma-b-face {
	width: 56px;
	height: 56px;
	box-shadow: 0 0 0 2px var(--mma-red);
}

.mma-b-card .mma-b-corner.is-two .mma-b-face {
	box-shadow: 0 0 0 2px var(--mma-blue);
}

.mma-b-card .mma-b-corner-body {
	display: grid;
	gap: 5px;
	min-width: 0;
	flex: 1 1 auto;
}

.mma-b-card .mma-b-name {
	font-size: 16px;
	white-space: normal;
}

.mma-b-card .mma-b-corner-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--mma-muted);
	line-height: 1;
}

.mma-b-card .mma-b-corner.is-two .mma-b-corner-meta {
	flex-direction: row-reverse;
}

.mma-b-card .mma-b-corner-flag {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	object-fit: cover;
}

.mma-b-card .mma-b-corner.is-loser {
	opacity: 0.5;
}

.mma-b-card a.mma-b-corner:hover {
	opacity: 1;
}

.mma-b-card a.mma-b-corner:hover .mma-b-name {
	color: var(--mma-red);
}

.mma-b-card .mma-b-vs {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--mma-red);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	font-style: italic;
	box-shadow: 0 6px 16px rgba(229, 25, 44, 0.35);
}

.mma-b-card .mma-b-bout.is-decided .mma-b-vs {
	background: #2b2c35;
	box-shadow: none;
	color: var(--mma-muted);
}

.mma-b-card .mma-b-bout-result {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--mma-line);
	font-size: 12px;
	letter-spacing: 0.3px;
	text-align: center;
	color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------- rankings */

.mma-b-rankings--cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.mma-b-rankings .mma-b-rank-group {
	min-width: 0;
}

.mma-b-rankings--cards .mma-b-rank-group,
.mma-b-rankings--list .mma-b-rank-group {
	padding: 18px;
	border-radius: 14px;
	background: var(--mma-card);
	color: var(--mma-on-card);
}

.mma-b-rankings .mma-b-rank-title {
	position: relative;
	margin: 0 0 8px;
	padding: 0 0 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 17px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.5px;
	line-height: 1.2;
	text-transform: uppercase;
}

.mma-b-rankings .mma-b-rank-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 46px;
	height: 3px;
	border-radius: 999px;
	background: var(--mma-red);
}

.mma-b-rankings .mma-b-rank-row > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mma-b-rankings .mma-b-rank-row:last-child > a {
	border-bottom: 0;
}

.mma-b-rankings .mma-b-rank-row .mma-b-face {
	width: 32px;
	height: 32px;
}

.mma-b-rankings .mma-b-rank-row .mma-b-name {
	font-size: 13px;
	flex: 1 1 auto;
}

.mma-b-rankings .mma-b-rank-row > a:hover .mma-b-name {
	color: var(--mma-red);
}

.mma-b-rankings .mma-b-rank-n {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border-radius: 8px;
	background: #101016;
	color: var(--mma-muted);
	font-size: 11px;
	font-weight: 800;
	font-style: italic;
}

.mma-b-rankings .mma-b-rank-n.is-c { background: linear-gradient(120deg, #b8860b, var(--mma-gold)); color: #1a1305; }
.mma-b-rankings .mma-b-rank-n.is-1 { background: #4d3a08; color: var(--mma-gold); }
.mma-b-rankings .mma-b-rank-n.is-2 { background: #33363c; color: #c9ced6; }
.mma-b-rankings .mma-b-rank-n.is-3 { background: #3c2413; color: #d98c4a; }

.mma-b-rankings .mma-b-rank-rec {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 11px;
	color: var(--mma-muted);
	white-space: nowrap;
}

/* podium: portraits in a row */
.mma-b-rankings--podium .mma-b-rank-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}

.mma-b-rankings--podium .mma-b-pod > a {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	background: linear-gradient(180deg, #23242c 0%, #15151a 58%, #2a0d12 100%);
	color: #fff;
	aspect-ratio: 3 / 4;
}

.mma-b-rankings--podium .mma-b-pod.is-champion > a {
	background: linear-gradient(180deg, #2c2615 0%, #15151a 58%, #3a2c08 100%);
}

.mma-b-rankings--podium .mma-b-pod-img,
.mma-b-rankings--podium .mma-b-pod .mma-b-face {
	position: absolute;
	inset: 6% 8% 0;
	width: 84%;
	height: auto;
	aspect-ratio: 3 / 4;
	border-radius: 0;
	background: none;
	object-fit: cover;
	object-position: 50% 0;
	transition: transform 0.35s ease;
}

.mma-b-rankings--podium .mma-b-pod > a:hover .mma-b-pod-img {
	transform: scale(1.05);
}

.mma-b-rankings--podium .mma-b-pod-rank {
	position: absolute;
	top: 10px;
	left: 12px;
	z-index: 1;
	font-size: 34px;
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.mma-b-rankings--podium .mma-b-pod.is-champion .mma-b-pod-rank {
	color: var(--mma-gold);
}

.mma-b-rankings--podium .mma-b-pod-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	gap: 4px;
	padding: 40px 12px 12px;
	background: linear-gradient(transparent, rgba(8, 8, 11, 0.94) 62%);
}

.mma-b-rankings--podium .mma-b-name {
	font-size: 15px;
	white-space: normal;
}

.mma-b-rankings--podium .mma-b-rank-rec {
	margin: 0;
	color: rgba(255, 255, 255, 0.66);
}

/* ---------------------------------------------------------------- bracket */

.mma-b-tournament {
	display: grid;
	/* minmax(0, …): a grid item is as wide as its content by default, so the
	   bracket pushed the whole page sideways on a phone instead of scrolling
	   inside .mma-b-br-scroll. */
	grid-template-columns: minmax(0, 1fr);
	gap: 34px;
}

.mma-b-tournament .mma-b-br {
	min-width: 0;
}

.mma-b-tournament .mma-b-br-title {
	position: relative;
	margin: 0 0 16px;
	padding: 0 0 10px;
	border-bottom: 1px solid rgba(128, 128, 140, 0.25);
	font-size: 15px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.mma-b-tournament .mma-b-br-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 46px;
	height: 3px;
	border-radius: 999px;
	background: var(--mma-red);
}

.mma-b-tournament .mma-b-br-champ {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	padding: 14px 18px;
	border-radius: 12px;
	background: linear-gradient(120deg, #141418 0%, #38290f 100%);
	color: #fff;
}

.mma-b-tournament .mma-b-br-champ .mma-b-face {
	width: 46px;
	height: 46px;
	box-shadow: 0 0 0 2px var(--mma-gold);
}

.mma-b-tournament .mma-b-br-champ small {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--mma-gold);
}

.mma-b-tournament .mma-b-br-champ b {
	font-size: 17px;
	font-style: italic;
	text-transform: uppercase;
}

.mma-b-tournament .mma-b-br-champ i {
	margin-left: auto;
	font-size: 11px;
	font-style: normal;
	color: rgba(255, 255, 255, 0.6);
}

.mma-b-tournament .mma-b-br-scroll {
	overflow-x: auto;
}

.mma-b-tournament .mma-b-br-grid {
	display: grid;
	grid-template-columns: repeat(var(--mma-rounds, 3), minmax(230px, 1fr));
	gap: 18px;
	min-width: calc(var(--mma-rounds, 3) * 248px);
}

/* The round name sits on one line across the columns; only the matches are
   spread down the column, so each pair lines up with the two it came from. */
.mma-b-tournament .mma-b-br-round {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.mma-b-tournament .mma-b-br-round-name {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.8px;
	text-align: center;
	text-transform: uppercase;
	color: var(--mma-muted);
}

.mma-b-tournament .mma-b-br-matches {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 12px;
}

.mma-b-tournament .mma-b-br-match {
	overflow: hidden;
	border-radius: 10px;
	background: var(--mma-card);
	color: var(--mma-on-card);
}

.mma-b-tournament .mma-b-br-side {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 7px 10px;
	border-left: 3px solid transparent;
}

.mma-b-tournament .mma-b-br-side + .mma-b-br-side {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.mma-b-tournament .mma-b-br-side .mma-b-face {
	width: 26px;
	height: 26px;
}

.mma-b-tournament .mma-b-br-side .mma-b-name {
	font-size: 12px;
	flex: 1 1 auto;
}

.mma-b-tournament .mma-b-br-side.is-winner {
	border-left-color: var(--mma-red);
	background: rgba(229, 25, 44, 0.1);
}

.mma-b-tournament .mma-b-br-side.is-loser {
	opacity: 0.4;
}

.mma-b-tournament .mma-b-br-side.is-tbd {
	font-size: 12px;
	font-style: italic;
	color: #6a6c78;
}

.mma-b-tournament .mma-b-br-w {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--mma-red);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
}

/* ---------------------------------------------------------------- counter */

.mma-b-counter {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 768px) {
	.mma-b-card .mma-b-bout {
		padding: 12px 12px 14px;
	}

	.mma-b-card .mma-b-bout-row {
		grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
		gap: 8px;
	}

	.mma-b-card .mma-b-corner,
	.mma-b-card .mma-b-corner.is-two {
		flex-direction: column;
		text-align: center;
		gap: 8px;
	}

	.mma-b-card .mma-b-corner-body {
		justify-items: center;
	}

	.mma-b-card .mma-b-corner .mma-b-face {
		width: 48px;
		height: 48px;
	}

	.mma-b-card .mma-b-name {
		font-size: 13px;
	}

	.mma-b-card .mma-b-vs {
		width: 30px;
		height: 30px;
		font-size: 9px;
	}

	.mma-b-history .mma-b-hist-row {
		grid-template-columns: 46px minmax(0, 1fr);
		gap: 6px 10px;
	}

	.mma-b-history .mma-b-hist-event,
	.mma-b-history .mma-b-hist-detail {
		grid-column: 2;
		text-align: left;
	}

	.mma-b-countdown--clock {
		grid-template-columns: repeat(4, minmax(54px, 1fr));
		gap: 6px;
	}

	.mma-b-countdown--clock b {
		font-size: 24px;
	}

	.mma-b-record--big .mma-b-rec {
		min-width: 60px;
		padding: 10px 10px 8px;
	}

	.mma-b-record--big .mma-b-rec b {
		font-size: 26px;
	}

	.mma-b-faceoff--hero .mma-b-fo-mid {
		margin: 0 -10px;
	}

	.mma-b-rankings--podium .mma-b-rank-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.mma-b * {
		transition: none !important;
	}
}

/* -------------------------------------------------------------- divisions */

.mma-b-divisions ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mma-b-divisions .mma-b-div {
	display: block;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid rgba(128, 128, 140, 0.35);
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.4px;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mma-b-divisions .mma-b-div span {
	font-style: normal;
	opacity: 0.6;
}

.mma-b-divisions .mma-b-div:hover,
.mma-b-divisions .mma-b-div.is-current {
	background: var(--mma-red);
	border-color: var(--mma-red);
	color: #fff;
}


/* =========================================================================
 * Ready-made lists (blocks/lists.php): event cards, event rows, result rows,
 * roster cards. Composed from the blocks above.
 * ====================================================================== */

.mma-l {
	--mma-cols: 3;
}

/* -------------------------------------------------------------- event cards */

.mma-l-ecards {
	display: grid;
	grid-template-columns: repeat(var(--mma-cols), minmax(0, 1fr));
	gap: 20px;
}

.mma-l-ecard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 18px 18px 20px;
	border-radius: 16px;
	/* Solid, not a tint: the card is a dark island and reads the same on a white page. */
	background: #1b1c22;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	color: #fff;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.mma-l-ecard:hover {
	background: #23242b;
	box-shadow: inset 0 0 0 1px rgba(229, 25, 44, 0.6);
}

.mma-l-ecard-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}

.mma-l-ecard-date {
	font-size: 13px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.mma-l-ecard .mma-b-faceoff {
	width: 100%;
	max-width: 330px;
	margin: 0 auto 14px;
}

.mma-l .mma-l-ecard-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: inherit;
}

.mma-l-ecard-title a:hover {
	color: var(--mma-red);
}

.mma-l .mma-l-ecard-meta {
	margin: 8px 0 0;
	font-size: 12px;
	text-align: center;
	color: var(--mma-muted);
}

/* --------------------------------------------------------------- event rows */

.mma-l-erows {
	display: grid;
	gap: 8px;
}

.mma-l-erow {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #222329;
	color: #fff;
	transition: background-color 0.25s ease;
}

.mma-l-erow:hover {
	background: #2f3038;
}

.mma-l-erow-day {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 3px;
	width: 52px;
	height: 54px;
	flex: 0 0 auto;
	border-radius: 6px;
	background: var(--mma-red);
	line-height: 1;
}

.mma-l-erow-day b {
	font-size: 22px;
	font-style: italic;
}

.mma-l-erow-day i {
	font-size: 9px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.mma-l-erow-body {
	display: grid;
	gap: 5px;
	flex: 1 1 auto;
	min-width: 0;
}

.mma-l-erow-title {
	font-size: 17px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.25;
	text-transform: uppercase;
}

.mma-l-erow-title:hover {
	color: var(--mma-red);
}

.mma-l-erow-meta {
	font-size: 11px;
	color: var(--mma-muted);
}

.mma-l-erow-meta b {
	font-weight: 600;
	color: #b6bbbf;
	margin-right: 8px;
}

.mma-l-erow-when {
	display: grid;
	justify-items: end;
	gap: 6px;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ------------------------------------------------------------- result rows */

.mma-l-results {
	display: grid;
	gap: 8px;
}

.mma-l-res {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--mma-card);
	color: #fff;
	transition: background-color 0.25s ease;
}

.mma-l-res:hover {
	background: var(--mma-card-2);
}

.mma-l-res-body {
	display: grid;
	gap: 5px;
	flex: 1 1 auto;
	min-width: 0;
}

.mma-l-res-event {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.8px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--mma-muted);
}

.mma-l-res-event:hover {
	color: #fff;
}

.mma-l-res .mma-b-result {
	font-size: 16px;
}

.mma-l-res-date {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	color: var(--mma-muted);
}

/* ------------------------------------------------------------ roster cards */

.mma-l-fcards {
	display: grid;
	grid-template-columns: repeat(var(--mma-cols), minmax(0, 1fr));
	gap: 20px;
}

.mma-l-fcard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	min-height: 360px;
	overflow: hidden;
	border-radius: 14px;
	background: linear-gradient(165deg, #1b1c23 0%, #1d161a 55%, #3a0f16 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	color: #fff;
	transition: box-shadow 0.3s ease;
}

.mma-l-fcard:hover {
	box-shadow: inset 0 0 0 1px rgba(229, 25, 44, 0.8), 0 18px 40px rgba(16, 16, 16, 0.35);
}

.mma-l-fcard .mma-b-portrait {
	position: absolute;
	top: 14px;
	left: 9%;
	width: 82%;
}

.mma-l-fcard-text {
	position: relative;
	z-index: 1;
	padding: 70px 15px 15px;
	background: linear-gradient(to bottom, rgba(12, 12, 16, 0) 0%, rgba(12, 12, 16, 0.92) 58%);
}

.mma-l .mma-l-chip {
	display: inline-block;
	margin: 0 0 8px;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--mma-red);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1;
	text-transform: uppercase;
}

.mma-l .mma-l-fcard-name {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 800;
	font-style: italic;
	line-height: 1.1;
	text-transform: uppercase;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
	color: inherit;
}

.mma-l-fcard-name a:hover {
	color: var(--mma-red);
}

.mma-l-fcard .mma-b-winrate {
	margin-top: 10px;
}

/* --------------------------------------------------------------- pagination */

.mma-l-pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
}

.mma-l-pages .page-numbers {
	display: inline-block;
	min-width: 38px;
	padding: 8px 12px;
	border-radius: 999px;
	line-height: 1.4;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mma-l-pages .page-numbers.current {
	background: var(--mma-red);
	color: #fff;
}

.mma-l-pages a.page-numbers:hover {
	background: #101010;
	color: #fff;
}

@media (max-width: 1024px) {
	.mma-l-ecards,
	.mma-l-fcards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mma-l-fcard {
		min-height: 330px;
	}
}

@media (max-width: 768px) {
	.mma-l-ecards,
	.mma-l-fcards {
		grid-template-columns: minmax(0, 1fr);
	}

	.mma-l-erow {
		gap: 10px;
		padding: 10px;
	}

	.mma-l-erow .mma-b-faceoff,
	.mma-l-erow-when > span:first-child,
	.mma-l-res-date {
		display: none;
	}

	.mma-l-erow-title {
		font-size: 13px;
	}

	.mma-l-res .mma-b-result {
		font-size: 14px;
	}
}

/* ---------------------------------------------------------------- buttons */

.mma-b.mma-b-btn {
	display: inline-block;
	padding: 14px 26px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.6px;
	line-height: 1.2;
	text-transform: uppercase;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.mma-b.mma-b-btn--solid {
	background: var(--mma-red);
	color: #fff;
	box-shadow: 0 10px 26px rgba(229, 25, 44, 0.35);
}

.mma-b.mma-b-btn--solid:hover {
	background: #ff2b3f;
	color: #fff;
	box-shadow: 0 14px 34px rgba(229, 25, 44, 0.5);
}

.mma-b.mma-b-btn--outline {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	color: #fff;
}

.mma-b.mma-b-btn--outline:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.mma-b.mma-b-btn--text {
	padding: 0;
	border-radius: 0;
	color: var(--mma-red);
}

/* --------------------------------------------------- headings over a block */

.mma-b-head {
	position: relative;
	margin: 0 0 16px;
	padding: 0 0 10px;
	border-bottom: 1px solid rgba(128, 128, 140, 0.25);
}

.mma-b-head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 46px;
	height: 3px;
	border-radius: 999px;
	background: #e5192c;
}

.mma-b-head > * {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.6px;
	line-height: 1.2;
	text-transform: uppercase;
	color: inherit;
}

/* ------------------------------------------------------------- fact tiles */

.mma-l-facts {
	display: grid;
	grid-template-columns: repeat(var(--mma-cols, 4), minmax(0, 1fr));
	gap: 10px;
}

.mma-l-facts .mma-b-field {
	padding: 11px 14px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

@media (max-width: 1024px) {
	.mma-l-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.mma-l-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================================
   Under a theme with no fighter or event template: the profile, or the fight
   card, as one dark island above the post's own text.
   ========================================================================= */

.mma-b-auto {
	display: grid;
	gap: 26px;
	margin: 0 0 28px;
	padding: 26px;
	border-radius: 18px;
	background: radial-gradient(ellipse at 78% 0%, #3d0f17 0%, #1a1116 46%, #111217 100%);
	color: #fff;
	font-size: 15px;
	line-height: 1.5;
}

.mma-b-auto > * {
	min-width: 0;
	margin: 0;
}

.mma-b-auto-top {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 28px;
	align-items: center;
}

.mma-b-auto-id {
	display: grid;
	gap: 18px;
	justify-items: start;
}

.mma-b-auto-id .mma-l-facts {
	width: 100%;
}

.mma-b-auto-chips,
.mma-b-auto-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.mma-b-auto-event {
	display: grid;
	gap: 16px;
	justify-items: center;
	text-align: center;
}

.mma-b-auto-meta {
	justify-content: center;
	color: rgba(255, 255, 255, 0.78);
}

.mma-b-auto-event .mma-b-faceoff {
	width: 100%;
	max-width: 720px;
}

.mma-b-auto .mma-b-head > * {
	color: #fff;
}

@media (max-width: 640px) {
	.mma-b-auto {
		padding: 18px 14px;
	}

	.mma-b-auto-top {
		grid-template-columns: minmax(0, 1fr);
	}

	.mma-b-auto-top .mma-b-portrait {
		max-width: 260px;
		margin: 0 auto;
	}
}