:root {
	--glass-card-body-padding: 28px;
	--glass-card-body-padding-mobile: 22px;
	--glass-card-body-radius: 16px;
	--glass-card-feature-padding: 48px 32px;
	--glass-card-feature-padding-tablet: 32px 24px;
	--glass-card-feature-padding-mobile: 28px 20px;
	--glass-card-feature-radius: 28px;

	--glass-card-light-background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46)),
		linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02));
	--glass-card-light-border: 1px solid rgba(255, 255, 255, 0.72);
	--glass-card-light-blur: 26px;
	--glass-card-light-saturation: 160%;
	--glass-card-light-shadow-outer: 0 0 42px rgba(0, 0, 0, 0.12);
	--glass-card-light-shadow-inner: 0 0 18px rgba(0, 0, 0, 0.06);
	--glass-card-light-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.72);
	--glass-card-light-text: rgba(0, 0, 0, 0.76);
	--glass-card-light-muted-text: rgba(0, 0, 0, 0.60);

	--glass-card-dark-background: rgba(0, 0, 0, 0.28);
	--glass-card-dark-border: 1px solid rgba(255, 255, 255, 0.08);
	--glass-card-dark-blur: 22px;
	--glass-card-dark-saturation: 140%;
	--glass-card-dark-shadow-outer: 0 0 42px rgba(0, 0, 0, 0.18);
	--glass-card-dark-shadow-inner: 0 0 18px rgba(0, 0, 0, 0.08);
	--glass-card-dark-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	--glass-card-dark-text: rgba(255, 255, 255, 0.85);
	--glass-card-dark-title-text: rgba(255, 255, 255, 0.95);
	--glass-card-dark-muted-text: rgba(255, 255, 255, 0.70);
	--glass-card-dark-mobile-solid-background: rgb(34, 38, 40);
}

.glassCard {
	box-sizing: border-box;
}

.glassCard--light {
	background: var(--glass-card-light-background);
	border: var(--glass-card-light-border);
	-webkit-backdrop-filter: blur(var(--glass-card-light-blur)) saturate(var(--glass-card-light-saturation));
	backdrop-filter: blur(var(--glass-card-light-blur)) saturate(var(--glass-card-light-saturation));
	box-shadow:
		var(--glass-card-light-shadow-outer),
		var(--glass-card-light-shadow-inner),
		var(--glass-card-light-inset-highlight);
	color: var(--glass-card-light-text);
}

.glassCard--dark {
	background: var(--glass-card-dark-background);
	border: var(--glass-card-dark-border);
	-webkit-backdrop-filter: blur(var(--glass-card-dark-blur)) saturate(var(--glass-card-dark-saturation));
	backdrop-filter: blur(var(--glass-card-dark-blur)) saturate(var(--glass-card-dark-saturation));
	box-shadow:
		var(--glass-card-dark-shadow-outer),
		var(--glass-card-dark-shadow-inner),
		var(--glass-card-dark-inset-highlight);
	color: var(--glass-card-dark-text);
}

.glassCard--body {
	border-radius: var(--glass-card-body-radius);
	padding: var(--glass-card-body-padding);
}

.glassCard--feature {
	border-radius: var(--glass-card-feature-radius);
	padding: var(--glass-card-feature-padding);
}

.glassCard--light.glassCard--feature {
	color: var(--glass-card-light-text);
}

.glassCard--dark.glassCard--feature {
	color: var(--glass-card-dark-text);
}

.glassCard--light.glassCard--feature h1,
.glassCard--light.glassCard--feature h2,
.glassCard--light.glassCard--feature h3 {
	color: var(--glass-card-light-text);
}

.glassCard--dark.glassCard--feature h1,
.glassCard--dark.glassCard--feature h2,
.glassCard--dark.glassCard--feature h3 {
	color: var(--glass-card-dark-title-text);
}

.glassCard--light.glassCard--feature p {
	color: var(--glass-card-light-muted-text);
}

.glassCard--dark.glassCard--feature p {
	color: var(--glass-card-dark-muted-text);
}

@media (max-width: 992px) {

	.glassCard--feature {
		padding: var(--glass-card-feature-padding-tablet);
	}

}

@media (max-width: 768px) {

	.glassCard--body {
		padding: var(--glass-card-body-padding-mobile);
	}

	.glassCard--feature {
		padding: var(--glass-card-feature-padding-mobile);
	}

}