.card {
	background: rgba(248, 242, 238, 0.45);
	border: 1px solid rgba(183,77,71,0.12);
	border-radius: 0.5rem;
	padding: 2rem;
	position: relative;
	transition: border-color 0.2s, box-shadow 0.2s;
	overflow: hidden;
}

.card:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gcid-primary-color);
	transition: background 0.2s;
}

.card:hover {
	background: rgba(255, 255, 255, 0.75);
	border-color: rgba(183,77,71,0.3);
	box-shadow: 0 4px 20px rgba(44,12,2,0.07);
	transform: translateY(-2px);
}

.card:hover::before {
	background: var(--gcid-jti3x6pam2);
}

.grid-hover {
	position: relative;
    overflow: hidden;
    cursor: default;
    transition: border-color 0.3s;
}

.grid-hover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #6f5e7f;
	margin-left: -1px;
    transform: translateX(-100%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.grid-hover:hover::before {
    transform: translateX(0);
}

.grid-hover > * {
    position: relative;
    z-index: 1;
}

.grid-hover-dot {
	opacity: 0.4;
	transition: opacity 0.3s;
}

.grid-hover:hover .grid-hover-dot {
	opacity: 1;
}

.grid-hover-text {
	color: #2c0c02;
	transition: color 0.3s;
}

.grid-hover:hover .grid-hover-text {
	color: #f8f2ee !important;
}