.second__card {
	@apply relative select-none text-[var(--color-text-primary)];
}

.mask__wrapper {
	--mask-bottom: linear-gradient(
		to bottom,
		var(--mask-visible) 30%,
		var(--mask-invisible) 80%
	);
	--mask-right: linear-gradient(
		to right,
		var(--mask-visible) 40%,
		var(--mask-invisible) 90%
	);

	mask-image: var(--mask-bottom), var(--mask-right);
	mask-composite: intersect;
}

.outter__container {
	@apply relative w-full h-full p-2 rounded-[18px];
}

.outter__container::before {
	@apply content-[''] pointer-events-none select-none absolute top-0 left-0 right-0 bottom-0 rounded-[18px] p-[1px];

	background: linear-gradient(
		to bottom right,
		hsla(0, 0%, 100%, 0.07),
		transparent
	);
	mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
	mask-composite: exclude;
}

.inner__container {
	@apply relative overflow-hidden isolate rounded-[10px] px-4 py-6;
	background: linear-gradient(
		134deg,
		hsla(0, 0%, 100%, 0.08),
		hsla(0, 0%, 100%, 0.02),
		hsla(0, 0%, 100%, 0) 55%
	);
}

.inner__container::before {
	@apply content-[''] pointer-events-none select-none absolute top-0 left-0 bottom-0 right-0 rounded-[18px] p-[1px];

	background: linear-gradient(
		to bottom right,
		hsla(0, 0%, 100%, 0.17),
		transparent
	);
	mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
	mask-composite: exclude;
}

.inner__container::after {
	@apply content-[''] pointer-events-none absolute inset-0 mix-blend-overlay opacity-10;
}

.inner__container .title {
	@apply text-[15px] leading-[24px] tracking-[-0.16px] font-medium text-[--color-text-primary] mb-4;
}

.inner__container .card__container {
	@apply flex flex-col gap-2 mb-16;
}
