/* 

COLORS

blue-1000: #040439
blue-600: #1A63FF
blue-300: #98B9F7
blue-100: #DAE7FF
slate: #4F4F6D
red: #E31E24

 */

.card {
	border-radius: 30px;
	box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.15);
	padding: 20px 15px;
	will-change: box-shadow, background-color;
	transition: box-shadow 200ms ease-in-out, background-color 200ms ease-in-out;
	overflow: hidden;
}

.card.liquid-glass {
	box-shadow: none;
	transition: none;
	background-color: rgba(243, 247, 255, 0.3);
	backdrop-filter: blur(5px) saturate(120%);
}

.card:not(.liquid-glass).with-hover:hover {
	background-color: var(--blue-100);
	box-shadow: 0px 0px 30px 5px rgba(26, 99, 255, 0.15);
}

.card.liquid-glass.with-hover:hover {
	box-shadow: 0px 0px 30px 5px rgba(26, 99, 255, 0.15);
}

@media (min-width: 1440px) {
	.card {
		padding: 40px 15px;
	}
}