.mavn-chips {
	display: grid;
	grid-template-columns: repeat(var(--mavn-chips-cols, 2), minmax(0, var(--mavn-chip-max-w, 290px)));
	gap: var(--mavn-chip-gap, 16px);
	position: relative;
	z-index: 3;
}

.mavn-chip {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: var(--mavn-chip-min-h, 76px);
	padding: 15px 108px 15px 24px;
	border-radius: var(--mavn-chip-radius, 18px);
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: 0.2px;
	color: var(--mavn-chip-color, #1c231e);
	text-decoration: none;
	background: linear-gradient(100deg, var(--mavn-chip-g1, #cbd7b9) 0%, var(--mavn-chip-g2, #e7eeda) 55%, var(--mavn-chip-g3, #e0ead2) 100%);
	transition: transform 0.25s ease, color 0.25s ease;
}

.mavn-chip--mint {
	--mavn-chip-g1: #fcfdfb;
	--mavn-chip-g2: #f0f6ec;
	--mavn-chip-g3: #deedd8;
}

.mavn-chip--steel {
	--mavn-chip-g1: #e7edf2;
	--mavn-chip-g2: #f3f7f9;
	--mavn-chip-g3: #fbfcfc;
}

.mavn-chip::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	background: radial-gradient(circle at 50% 42%, var(--mavn-chip-hover-1, #2e5b33) 0%, var(--mavn-chip-hover-2, #1b3d22) 60%, var(--mavn-chip-hover-3, #122917) 100%);
	transition: opacity 0.3s ease;
}

.mavn-chip > span {
	position: relative;
	z-index: 1;
}

.mavn-chip img {
	position: absolute;
	right: -50px;
	bottom: -48px;
	height: var(--mavn-chip-img-h, 164px);
	width: auto;
	z-index: 1;
}

.mavn-chip:hover {
	transform: translateY(-2px);
	color: var(--mavn-chip-hover-color, #fff);
}

.mavn-chip:hover::before {
	opacity: 1;
}

.mavn-chip:focus-visible {
	outline: 2.5px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 640px) {
	.mavn-chips {
		grid-template-columns: 1fr;
		max-width: 320px;
	}

	.mavn-chip img {
		height: 156px;
		right: -48px;
		bottom: -48px;
	}
}