/**
 * Tool cards.
 */

/* Tool card ------------------------------------------------------------- */

.calc-card::before {
	z-index: -1;
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	pointer-events: none;
	background: linear-gradient(to bottom, var(--e-global-color-cd032c6) 35%, color-mix(in srgb, var(--e-global-color-cd032c6) 80%, var(--e-global-color-3dbc0c7) 20%) 100%);
	border-radius: 33px;
}
.calc-card {
	position: relative;
	border: 1px solid color-mix(in srgb, var(--e-global-color-cd032c6) 91%, var(--e-global-color-3dbc0c7) 9%);
	overflow: unset;
}
/* Mobile */
@media (max-width: 767px) {
	.calc-card::before {
		border-radius: 25px;
	}
}

/* Tool card grid -------------------------------------------------------- */

.calc-grid {
	--calc-grid-columns: 3;
	--calc-grid-gap: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--calc-grid-gap);
	isolation: isolate;
}
.calc-grid .calc-card {
	flex: 0 0 calc((100% - (var(--calc-grid-columns) - 1) * var(--calc-grid-gap)) / var(--calc-grid-columns));
}
/* Desktop */
@media (min-width: 1367px) {
	.calc-grid {
		--calc-grid-columns: 3;
		--calc-grid-gap: 20px;
	}
}
/* Laptop */
@media (max-width: 1366px) and (min-width: 1025px) {
	.calc-grid {
		--calc-grid-columns: 3;
		--calc-grid-gap: 16px;
	}
}
/* Tablet */
@media (max-width: 1024px) and (min-width: 768px) {
	.calc-grid {
		--calc-grid-columns: 2;
		--calc-grid-gap: 16px;
	}
}
/* Mobile */
@media (max-width: 767px) {
	.calc-grid {
		--calc-grid-columns: 1;
		--calc-grid-gap: 16px;
	}
}