.mc-build {
}

.mc-build:hover {
}

.mc-builds::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -300px;
	left: 50%;
	width: min(900px, 100%);
	height: 600px;
	transform:
		translateX(-50%);
	pointer-events: none;
	background:
		radial-gradient(
			circle,
			rgba(122, 77, 255, .075),
			transparent 68%
		);
}

.mc-builds-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 28px;
	margin-bottom: 34px;
	padding-bottom: 26px;
	border-bottom:
		1px solid rgba(255,255,255,.08);
}

.mc-builds-header > div {
	max-width: 820px;
}

.mc-builds-header h1,
.mc-builds-header h2 {
	margin-bottom: 10px;
}

.mc-builds-header .lead {
	max-width: 700px;
	margin-bottom: 0;
	color: var(--muted);
}

.mc-builds-header .btn {
	flex: 0 0 auto;
}

.mc-build {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border:
		1px solid rgba(255,255,255,.08);
	border-radius: var(--r-l);
	background: #090b10;
	box-shadow:
		0 12px 30px rgba(0,0,0,.18);
	transition:
		transform .3s ease,
		border-color .3s ease,
		box-shadow .3s ease;
}

.mc-build:hover {
	transform: translateY(-3px);
	border-color:
		rgba(201,163,92,.28);
	box-shadow:
		0 24px 55px rgba(0,0,0,.36);
}

.mc-build-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	display: block;
	overflow: hidden;
	background:
		linear-gradient(
			135deg,
			#10131a,
			#090b10
		);
}