:root {
	--primary-color: hsl(47, 100%, 50%);
	--secondary-color: hsl(25, 100%, 52%);

	--linear: to right, var(--primary-color), var(--secondary-color);
	--linear-second: to right, var(--secondary-color), var(--primary-color);
}

*,
*::after,
*::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

.main__heading {
	font-weight: 600;
	font-size: 2em;
	margin-bottom: 0.75em;
	text-align: center;
	color: #eceff1;
}

.cards-dropshipping {
	position: relative;
}

.cards-ecommerce {
	position: relative;
}

.card {
	position: relative;
	overflow: hidden;
	--flow-space: 0.5em;
	--hsl: var(--hue), var(--saturation), var(--lightness);
	flex: 1 1 14rem;
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	align-items: start;
	gap: 1.25em;
	color: #eceff1;
	background-color: #202020;
	border: 1px solid #484849;
	border-radius: 16px;
	padding: 10px;
}

.card:nth-child(1) {
	--hue: 47;
	--saturation: 100%;
	--lightness: 50%;
}

.card:nth-child(2) {
	--hue: 25;
	--saturation: 100%;
	--lightness: 52%;

	--secondary-color: hsl(25, 100%, 52%);
}

.card:nth-child(3) {
	--hue: 47;
	--saturation: 100%;
	--lightness: 50%;
}

.card__bullets {
	line-height: 1.4;
}

.card__bullets .ok-icon::before {
	display: inline-block;
	content: url("../../assets/images/ok.svg");
	transform: translatey(0.25ch);
	margin-right: 1ch;
}

.card__bullets .close-icon::before {
	display: inline-block;
	content: url("../../assets/images/close-icon.svg");
	transform: translatey(0.25ch);
	margin-right: 1ch;
	padding: 4px;
}

.card__bullets li {
}

.cta {
	display: block;
	align-self: end;
	/* margin: 1em 0 0.5em 0; */
	text-align: center;
	text-decoration: none;
	color: #fff;
	background-color: #0d0d0d;
	padding: 0.7em;
	font-size: 18px;
	font-weight: 600;
	border-radius: 50px;
}

.overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	user-select: none;
	opacity: var(--opacity, 0);
	-webkit-mask: radial-gradient(
		25rem 25rem at var(--x) var(--y),
		#000 1%,
		transparent 50%
	);
	mask: radial-gradient(
		25rem 25rem at var(--x) var(--y),
		#000 1%,
		transparent 50%
	);
	transition: 400ms mask ease;
	will-change: mask;
}

.overlay .card {
	background-color: hsla(var(--hsl), 0.15);
	border-color: hsla(var(--hsl), 1);
	box-shadow: 0 0 0 1px inset hsl(var(--hsl));
}

.overlay .cta {
	display: block;
	grid-row: -1;
	width: 100%;
	background-color: hsl(var(--hsl));
	box-shadow: 0 0 0 1px hsl(var(--hsl));
}

:not(.overlay) > .card {
	transition: 400ms background ease;
	will-change: background;
}

:not(.overlay) > .card:hover {
	--lightness: 95%;
	background: hsla(var(--hsl), 0.1);
}