/* ===== УНИКАЛЬНЫЕ СТИЛИ КАРУСЕЛИ ЛОГОТИПОВ ===== */
.carousel-logos-wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    --carousel-logos-gap: 20px;
    --carousel-logos-radius: 25px;
    --carousel-logos-height: 250px;
}

.carousel-logos-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    gap: var(--carousel-logos-gap);
    will-change: transform;
}

.carousel-logos-card {
    flex: 1 0 calc(20% - 16px);
    border-radius: var(--carousel-logos-radius);
    /* background: linear-gradient(180deg, #7E57C5 -155.41%, #7E57C5 123.65%);
    box-shadow: 0 4px 10px 0 rgba(255, 255, 255, 0.25) inset; */
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: var(--carousel-logos-height);
    min-width: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: grab;
}

.carousel-logos-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--carousel-logos-radius);
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-draggable: false;
    draggable: false;
}

.carousel-logos-card:hover {
    transform: translateY(-8px);
    /* box-shadow: 0 8px 20px rgba(126, 87, 197, 0.4); */
}

.carousel-logos-card:active {
    cursor: grabbing;
}

/* ===== АДАПТИВ КАРУСЕЛИ ЛОГОТИПОВ ===== */
@media (max-width: 1400px) {
    .carousel-logos-wrapper {
        --carousel-logos-height: 200px;
    }

    .carousel-logos-card {
        flex: 1 0 calc(33.333% - 14px);
    }
}

@media (max-width: 1024px) {
    .carousel-logos-wrapper {
        --carousel-logos-height: 180px;
    }

    .carousel-logos-card {
        flex: 1 0 calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .carousel-logos-wrapper {
        --carousel-logos-gap: 16px;
        --carousel-logos-height: 220px;
    }

    .carousel-logos-card {
        flex: 1 0 100%;
    }

    .carousel-logos-track {
        gap: var(--carousel-logos-gap);
    }
}

@media (max-width: 480px) {
    .carousel-logos-wrapper {
        --carousel-logos-gap: 12px;
        --carousel-logos-height: 180px;
        --carousel-logos-radius: 20px;
    }

    .carousel-logos-card {
        border-radius: var(--carousel-logos-radius);
    }

    .carousel-logos-card img {
        border-radius: var(--carousel-logos-radius);
    }
}