.ic-05f162fe-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    --speed: 20s;
    --gap: 20px;
    --slides-to-show: 3;
}

.ic-05f162fe-track {
    display: flex;
    width: max-content;
    animation: ic-scroll-05f162fe var(--speed) linear infinite;
}

.ic-05f162fe-track[data-direction="right"] {
    animation-direction: reverse;
}

.ic-05f162fe-track[data-pause="yes"]:hover {
    animation-play-state: paused;
}

.ic-05f162fe-content {
    display: flex;
    flex-wrap: nowrap;
}

.ic-05f162fe-item {
    flex-shrink: 0;
    /* Calculate width based on viewport, subtracting total gaps divided by number of slides */
    width: calc((100vw / var(--slides-to-show)) - var(--gap) + (var(--gap) / var(--slides-to-show)));
    max-width: 100vw;
    margin-right: var(--gap);
    display: flex;
    flex-direction: column;
}

/* Fallback width calculation logic using container queries if available or typical 100% width math */
@supports (width: calc(100% / 3)) {
    .ic-05f162fe-item {
        /* This is tricky without JS, using a container width via CSS vars would be ideal, 
           but relying on 100% of wrapper doesn't work well in a max-content track.
           We'll use a standard fallback or rely on JS if precise container width is needed. */
         width: calc((100% / var(--slides-to-show)) - var(--gap) + (var(--gap) / var(--slides-to-show)));
    }
}

.ic-05f162fe-item img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 15px;
    border-radius: 0; /* Fallback */
}

.ic-05f162fe-title {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.ic-05f162fe-caption {
    font-size: 0.95rem;
    opacity: 0.8;
}

@keyframes ic-scroll-05f162fe {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - (var(--gap) / 2)));
    }
}