.card-container {
	--gap: 10px;
	display: flex;
	gap: var(--gap);
}

.project-box {
	width: calc((100% / var(--childs)));
	height: 530px;
	box-sizing: border-box;
	background-color: white;
	cursor: pointer;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	transition: width 0.5s ease;
	position: relative;
}

.map-container {
	height: 250px;
	z-index: -2;
}

.project-box img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.box-overlay {
	position: absolute;
	color: var(--bs-light);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000 100%),
		linear-gradient(
			180deg,
			rgba(54, 31, 18, 0.9) 0%,
			rgba(54, 31, 18, 0.32) 100%
		);
	display: flex;
	align-items: start;
	justify-content: end;
	padding: 20px;
	transition: background 300ms ease-in-out;
	opacity: 1;
}

.box-overlay--logo,
.box-overlay--arrow {
	visibility: hidden;
	opacity: 0;
	transition: all 0.2s ease;
}

.box-overlay img {
	width: 40px;
	height: 40px;
}

.project-box:hover {
	width: calc((100% / (var(--childs) - 3.88)));
}

.project-box:hover ~ .project-box .box-overlay--arrow {
	display: none;
}

.project-box:hover .box-overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 84.58%);
}

.project-box:hover .box-overlay--logo,
.project-box:hover .box-overlay--arrow {
	visibility: initial;
	opacity: 1;
}

.map-overlay {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 350px;
	z-index: -1;
}

.map-overlay--bg {
	background: linear-gradient(
		180deg,
		#faf7ec 50%,
		rgba(250, 247, 236, 0.5) 100%
	);
	transition: all 0.2s ease;
}

.map-overlay--bg.hover {
	background: linear-gradient(
		180deg,
		#faf7ec 0%,
		rgba(250, 247, 236, 1) 27.84%,
		rgba(250, 247, 236, 0) 50%
	) !important;
}

.project-box:hover .map-overlay {
	background: none;
}

.card-container:has(.box:hover) .box:not(:hover) {
	width: calc((100% / (var(--childs) + 1)));
}

@media screen and (max-width: 905px) {
	.project-box {
		height: 480px;
		width: calc((100% / (var(--childs) - 2)));
		min-width: 80%;
		max-width: 600px;
	}

	.project-box .box-overlay {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 84.58%);
	}

	.project-box .box-overlay--logo,
	.project-box .box-overlay--arrow {
		visibility: initial;
		opacity: 1;
	}

	.card-container {
		overflow-x: scroll;
	}
}

@media screen and (max-width: 600px) {
	.dash-icon {
		width: 80px;
	}
}