.ha-image-strip {
    --ha-strip-height: 156px;
    --ha-strip-item-width: 234px;
    --ha-strip-gap: 4px;

    position: relative;
    z-index: 5;
    display: block;
    width: 100vw;
    height: var(--ha-strip-height);
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    background: #f1eee7;
}

.ha-image-strip__track {
    display: flex;
    width: max-content;
    height: 100%;
    opacity: 0;
    will-change: transform;
    animation: ha-image-strip-scroll 120s linear infinite;
    animation-play-state: paused;
    transition: opacity 220ms ease;
}

.ha-image-strip.is-ready .ha-image-strip__track {
    opacity: 1;
    animation-play-state: running;
}

.ha-image-strip__group {
    display: flex;
    flex: none;
    gap: var(--ha-strip-gap);
    padding-right: var(--ha-strip-gap);
}

.ha-image-strip__item {
    flex: 0 0 var(--ha-strip-item-width);
    width: var(--ha-strip-item-width);
    height: var(--ha-strip-height);
    overflow: hidden;
    background: #f1eee7;
}

.ha-image-strip__image {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
}

.ha-image-strip-ad-shift {
    translate: 0 var(--ha-strip-ad-offset, 174px);
}

@keyframes ha-image-strip-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (max-width: 1024px) {
    .ha-image-strip {
        --ha-strip-height: 120px;
        --ha-strip-item-width: 180px;
    }

    .ha-image-strip__track {
        animation-duration: 110s;
    }
}

@media (max-width: 600px) {
    .ha-image-strip {
        --ha-strip-height: 88px;
        --ha-strip-item-width: 132px;
        --ha-strip-gap: 3px;
    }

    .ha-image-strip__track {
        animation-duration: 95s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ha-image-strip {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .ha-image-strip__track,
    .ha-image-strip.is-ready .ha-image-strip__track {
        opacity: 1;
        animation: none;
        transform: none;
    }

    .ha-image-strip__group[aria-hidden="true"] {
        display: none;
    }
}