.clients {
    position: relative;
    overflow: hidden;
    background-image: var(--background-image-light-coloured-card);
    padding-block: calc(var(--spacing) * 24);
    margin-bottom: -20rem;
}

.clients__title {
    margin: 0 0 3.2rem;
    text-align: center;
    color: #0f1c2a;
}

.clients__marquee {
    width: 100%;
    overflow: hidden;
}

.clients__track {
    display: flex;
    width: max-content;
    animation: clients-marquee 30s linear infinite;
    will-change: transform;
}

.clients__group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6rem;
    padding-right: 6rem;
}

.clients__item {
    display: flex;
    flex: 0 0 18rem;
    align-items: center;
    justify-content: center;
    height: 12rem;
}

.clients__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 8rem;
    object-fit: contain;
}

@keyframes clients-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (width >= 1025px) {
    .clients {
        padding-block: calc(var(--spacing) * 40);
    }
}
@media (width >= 720px) {
    .clients {
        padding-block: calc(var(--spacing) * 32);
    }
}

@media (max-width: 1023px) {
    .clients__group {
        gap: 4rem;
        padding-right: 4rem;
    }

    .clients__item {
        flex-basis: 15rem;
        height: 10rem;
    }
}

@media (max-width: 639px) {
    .clients__title {
        margin-bottom: 2.4rem;
    }

    .clients__group {
        gap: 2.4rem;
        padding-right: 2.4rem;
    }

    .clients__item {
        flex-basis: 12rem;
        height: 8rem;
    }

    .clients__image {
        max-height: 6rem;
    }

    .clients__track {
        animation-duration: 22s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clients__track {
        animation: none;
    }

    .clients__marquee {
        overflow-x: auto;
    }
}