:root {
  --scroll-speed: 20s;
  --card-width: 250px;
  --card-gap: 30px;
  --fade-bg: #ffffff;
  --fade-width: 15%;
}

.ic-wrapper-3e463f3c {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
}

.ic-wrapper-3e463f3c::before,
.ic-wrapper-3e463f3c::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--fade-width, 15%);
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.ic-wrapper-3e463f3c::before {
  left: 0;
  background: linear-gradient(to right, var(--fade-bg), transparent);
}

.ic-wrapper-3e463f3c::after {
  right: 0;
  background: linear-gradient(to left, var(--fade-bg), transparent);
}

.ic-track-3e463f3c {
  display: flex;
  width: max-content;
  gap: var(--card-gap);
}

.ic-dir-left-3e463f3c {
  animation: ic_scroll_left_3e463f3c var(--scroll-speed) linear infinite;
}

.ic-dir-right-3e463f3c {
  animation: ic_scroll_right_3e463f3c var(--scroll-speed) linear infinite;
}

.ic-list-3e463f3c {
  display: flex;
  gap: var(--card-gap);
}

.ic-item-3e463f3c {
  flex: 0 0 auto;
  width: var(--card-width);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.ic-img-container-3e463f3c {
  width: 100%;
  background-color: #f7f9fa; /* Inner background color matching reference */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  /* height and border-radius set by controls */
}

.ic-img-3e463f3c {
  /* width, max-width, height, max-height and object-fit set by controls */
}

.ic-content-3e463f3c {
  padding-top: 15px;
  text-align: center;
}

.ic-desc-3e463f3c {
  margin: 0;
}

@keyframes ic_scroll_left_3e463f3c {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - (var(--card-gap) / 2))); }
}

@keyframes ic_scroll_right_3e463f3c {
  0% { transform: translateX(calc(-50% - (var(--card-gap) / 2))); }
  100% { transform: translateX(0); }
}