.codevz-wcb {
	overflow: hidden;
	position: relative;
	margin: 0px 0 2em
}

.codevz-wcb-inner {
	--show-left: 0;
	--show-right: 0;
	--fade-width: 15%; /* Increased width for a more noticeable fade */

	transition: mask-image 0.2s ease-in-out;
	-webkit-transition: -webkit-mask-image 0.2s ease-in-out;

	-webkit-mask-image: linear-gradient(
	    to right,
	    rgba(0, 0, 0, calc(1 - var(--show-left))) 0%,
	    black var(--fade-width),
	    black calc(100% - var(--fade-width)),
	    rgba(0, 0, 0, calc(1 - var(--show-right))) 100%
	);

	mask-image: linear-gradient(
	    to right,
	    rgba(0, 0, 0, calc(1 - var(--show-left))) 0%,
	    black var(--fade-width),
	    black calc(100% - var(--fade-width)),
	    rgba(0, 0, 0, calc(1 - var(--show-right))) 100%
	);

	display: flex;
	gap: 20px;
	margin: 0 -20px;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE */
	cursor: grab;
	user-select: none;
	overflow-x: auto;
	white-space: nowrap;
}
.codevz-wcb-inner::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}
.codevz-wcb-inner a {
	user-select: none;
	min-width: 170px;
	flex-shrink: 0;
	display: flex;
	overflow: hidden;
	align-items: center;
	color: #676767;
	background: #6767670f;
	padding: 12px;
	line-height: 1
}
.codevz-wcb-inner a:hover,
.codevz-wcb-inner .codevz-wcb-active {
	background: #676767;
	color: #fff
}
.codevz-wcb-inner .codevz-wcb-icon {
	flex: none;
	border-radius: inherit;
	margin-inline-end: 15px
}
.codevz-wcb-inner .codevz-wcb-icon img {
	width: 40px;
	height: 40px
}
.codevz-wcb-inner .codevz-wcb-icon i {
	width: 1em;
	height: 1em;
	line-height: 1em;
	font-size: 20px;
	padding: 10px;
	text-align: center;
	color: #333;
	background: #fff;
	border-radius: inherit
}
.codevz-wcb-inner .codevz-wcb-title {
	width: 100%;
	white-space: nowrap;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis
}
.codevz-wcb-inner .codevz-wcb-title strong {
	font-size: 15px;
	display: block
}
.codevz-wcb-inner .codevz-wcb-title small {
	font-size: 13px;
	opacity: .75;
	display: block;
	margin: 5px 0 0
}

.codevz-wcb-1 .codevz-wcb-icon {
	display: none
}
.codevz-wcb-1 .codevz-wcb-inner a {
	padding: 15px 20px;
	width: 120px
}
.codevz-wcb-3 .codevz-wcb-inner a {
	flex-direction: row-reverse
}
.codevz-wcb-3 .codevz-wcb-icon {
	margin-inline-start: 15px;
	margin-inline-end: 0
}
.codevz-wcb-4 .codevz-wcb-inner a,
.codevz-wcb-5 .codevz-wcb-inner a {
	flex-direction: column;
	text-align: center;
	padding: 20px;
	width: 130px
}
.codevz-wcb-4 .codevz-wcb-icon {
	margin-inline-start: 0;
	margin-inline-end: 0;
	margin-bottom: 15px
}
.codevz-wcb-5 .codevz-wcb-inner a {
	flex-direction: column-reverse
}
.codevz-wcb-5 .codevz-wcb-icon {
	margin-inline-start: 0;
	margin-inline-end: 0;
	margin-top: 15px
}

@media screen and (max-width: 768px) {

	.codevz-wcb-inner a {
		padding: 10px;
		min-width: 120px;
	}
	.codevz-wcb-inner .codevz-wcb-icon i {
		font-size: 15px;
		padding: 8px
	}
	.codevz-wcb-inner .codevz-wcb-title strong {
		font-size: 12px
	}
	.codevz-wcb-inner .codevz-wcb-title small {
		font-size: 10px
	}
	.codevz-wcb-inner .codevz-wcb-icon img {
		width: 31px;
		height: 31px
	}

}