@use '../../../styles/tools/functions';
@use '../../../styles/settings/colours';
@use '../../../styles/settings/variables';

.Outer {
    overflow: hidden;
}

.Inner {
    position: relative;
}

.Logos {
    display: inline-flex;
    align-items: center;

    &--Main {
        position: relative;
        animation: slide linear infinite;
    }

    &--Left {
        width: 200%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 100%;
    }

    &--Right {
        width: 200%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 100%;
    }
}

.Carousel {
    overflow: visible;
    --swiper-wrapper-transition-timing-function: linear;
}

.Logo {
    margin-right: functions.pxRem(30);

    @media all and (min-width: functions.em(768)) {
        margin-right: functions.pxRem(50);
    }

    @media all and (min-width: functions.em(1200)) {
        margin-right: functions.pxRem(90);
    }

    @media all and (min-width: functions.em(1440)) {
        margin-right: functions.pxRem(140);
    }

    img {
        max-width: none;
        display: block;
        margin: auto;
    }
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}