.payment-logos-wrapper {
    overflow: hidden;
    border-radius: var(--radius-16) var(--radius-16) 0 0;
    background: #ADFF60;
}

.payment-logos-container {
    display: flex;
    padding: 48px 32px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

.logos-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 88px;
    width: 100%;
}

.payment-logos-container svg {
    height: 32px;
    width: auto;
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .payment-logos-wrapper {
        position: relative;
    }

    .mobile-only {
        display: flex;
    }

    .payment-logos-container {
        padding: 48px 24px;
        justify-content: flex-start;
        animation: scroll 28s linear infinite;
        width: max-content;
    }

    .logos-group {
        gap: 24px;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }

    /* Pause animation on hover */
    .payment-logos-container:hover {
        animation-play-state: paused;
    }

    /* Add fade effect on edges */
    .payment-logos-wrapper::before,
    .payment-logos-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        width: 50px;
        height: 100%;
        z-index: 1;
    }

    .payment-logos-wrapper::before {
        left: 0;
        background: linear-gradient(to right, #ADFF60 0%, transparent 100%);
    }

    .payment-logos-wrapper::after {
        right: 0;
        background: linear-gradient(to left, #ADFF60 0%, transparent 100%);
    }
}