.news-sponsor {
    .gallery-row {
        @include margin($grid-gutter-width -#{$grid-gutter-width/2} 0);
        display: block;
        white-space: nowrap;
        text-align: center;

        .gallery-item {
            display: inline-flex;
            justify-content: center;
            padding: $grid-gutter-width/2;
            vertical-align: middle;

            img {
                max-height: 5rem;
                max-width: 8rem;
                object-fit: contain;
            }
        }
    }

    &:not(.news-sponsor-slider) .gallery-row {
        align-items: center;
        display: flex;
        justify-content: center;
    }

    // Cards
    &-cards {
        &:not(.news-sponsor-slider) .gallery-row {
            align-items: stretch;
        }

        .news-img-wrap {
            height: 100%;
            width: 100%;

            a {
                align-items: center;
                background: none;
                border: $border-width solid $border-color;
                display: flex;
                height: 100%;
                justify-content: center;
                padding: $grid-gutter-width/3;
                width: 100%;
            }
        }
    }

    // Slider
    &-slider .gallery-row {
        transform: translateX(calc(var(--offset) * calc(-100% / var(--cols))));
        --duration: 1500;
        --timeout: 2000;
        --cols: 2;

        @include media-breakpoint-up('sm') {
            --timeout: 3000;
            --cols: 3;
        }

        @include media-breakpoint-up('md') {
            --timeout: 6000;
            --cols: 6;
        }

        .gallery-item {
            --col: 0;
            $colDelay: 200;
            --itemDuration: calc((var(--duration) - var(--cols) * #{$colDelay}) * 1ms);
            opacity: 0;

            &.animate-in {
                animation: logoBarItemIn cubic-bezier(0.5, 1, 0.89, 1) both;
                animation-duration: var(--itemDuration);
                animation-delay : calc(var(--col) * #{$colDelay * 1ms});
            }

            &.animate-out {
                animation: logoBarItemOut cubic-bezier(0.11, 0, 0.5, 0) both;
                animation-duration: var(--itemDuration);
                animation-delay : calc(var(--col) * #{$colDelay * 1ms});
            }
        }
    }
}

@keyframes logoBarItemIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes logoBarItemOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}