.ccx-carousel {
	--ccx-name-size: 14px;
	--ccx-name-weight: 600;
	--ccx-name-color: #111;
	--ccx-ring: #ececec;
	--ccx-ring-hover: #1a1a1a;
	--ccx-bullet-active: #1a1a1a;
	width: 100%;
	padding: 10px 0 28px;
}

.ccx-swiper {
	width: 100%;
	overflow: hidden;
}

.ccx-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	text-align: center;
}

.ccx-media {
	display: block;
	width: var(--ccx-w, 100%);
	height: var(--ccx-h, auto);
	max-width: 100%;
	aspect-ratio: var(--ccx-ar, 1 / 1);
	border-radius: 50%;
	overflow: hidden;
	background: #f5f5f5;
	border: 2px solid var(--ccx-ring);
	transition: border-color .25s ease, transform .25s ease;
}

.ccx-item:hover .ccx-media {
	border-color: var(--ccx-ring-hover);
	transform: translateY(-4px);
}

.ccx-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.ccx-item:hover .ccx-media img {
	transform: scale(1.08);
}

.ccx-name {
	font-size: var(--ccx-name-size);
	font-weight: var(--ccx-name-weight);
	color: var(--ccx-name-color);
	line-height: 1.3;
}

.ccx-carousel .swiper-pagination {
	position: static;
	margin-top: 14px;
}

.ccx-carousel .swiper-pagination-bullet-active {
	background: var(--ccx-bullet-active);
}