.fr-clients { padding: 60px 0 70px; background: transparent; }
.fr-clients__title {
    text-align: center;
    color: var(--fr-dark);
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 40px;
}

.fr-clients__carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
.fr-clients__viewport {
    flex: 1;
    overflow: hidden;
}
.fr-clients__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    transition: transform .45s ease;
}
.fr-clients__item {
    flex: 0 0 auto;
    width: calc(100% / 4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    min-height: 100px;
}
.fr-clients__item img {
    max-height: 80px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .7;
    transition: opacity .2s, filter .2s;
}
.fr-clients__item img:hover { opacity: 1; filter: grayscale(0); }

.fr-clients__nav {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--fr-dark);
    border: 1px solid #ddd;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fr-clients__nav:hover { background: var(--fr-red); color: #fff; border-color: var(--fr-red); }
.fr-clients__nav:disabled { opacity: .35; cursor: default; }

@media (max-width: 900px) {
    .fr-clients__item { width: calc(100% / 3); }
}
@media (max-width: 640px) {
    .fr-clients__item { width: calc(100% / 2); }
}
@media (max-width: 420px) {
    .fr-clients__item { width: 100%; }
}