.ehg-844-container {
	display: flex;
	width: 100%;
	gap: 10px;
	overflow: hidden;
}

.ehg-844-item {
	position: relative;
	flex: 1;
	border-radius: 0; /* Changed to square corners */
	overflow: hidden;
	transition: flex 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
	cursor: pointer;
	display: flex;
	align-items: flex-end;
}

/* Accent Line */
.ehg-844-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 3;
	transform: scaleX(0);
	transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
	transform-origin: left;
}

/* Gradient Overlay */
.ehg-844-item::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.ehg-844-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: 0;
	transition: transform 1.2s ease;
}

.ehg-844-content {
	position: relative;
	z-index: 2;
	padding: 30px;
	width: 100%;
}

.ehg-844-title {
	margin: 0;
	font-weight: bold;
	text-transform: uppercase;
	transition: transform 0.8s ease;
}

.ehg-844-subtitle-wrapper {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.8s ease, opacity 0.8s ease, margin-top 0.8s ease;
}

.ehg-844-subtitle {
	margin: 0;
}

/* Hover States */
.ehg-844-container:hover .ehg-844-item {
	flex: 0.8; /* Shrink others */
}

.ehg-844-container .ehg-844-item:hover {
	flex: 2; /* Expand hovered (reduced from 3) */
}

.ehg-844-item:hover::before {
	transform: scaleX(1); /* Show accent line */
}

.ehg-844-item:hover .ehg-844-subtitle-wrapper {
	max-height: 50px;
	opacity: 1;
	margin-top: 10px;
}

.ehg-844-item:hover .ehg-844-bg {
	transform: scale(1.05); /* Slight zoom on background */
}

/* Responsive adjustments */
@media (max-width: 767px) {
	.ehg-844-container {
		flex-direction: column;
	}
	
	.ehg-844-item {
		min-height: 150px;
	}
	
	.ehg-844-container:hover .ehg-844-item {
		flex: 1; /* Reset flex shrinking on mobile to avoid collapsing too much */
	}
	
	.ehg-844-container .ehg-844-item:hover {
		flex: 1.5; /* Reduced expansion on mobile too */
	}
}