Help to fix a code snippet

[Onlinetrap]

Hi,

I am not a coder at all, and I have played around with this code to create a moving banner, but I just can't get it right. You can see it as the "pick 3 pay 2" banner which is moving on our website: www.arcticdrip.com 

1) I need help with fixing it to look proper on mobile, here is how it currently looks on mobile view:

 

2) I need help with making it "consistent" currently moves to the left side and disappears before popping up again, I need it to slide smoothly and consistently without any space and sudden jumping when the text comes back.

3) I need help with the padding/space between the text and the next section, if its possible to make that slimmer

I appreciate all the help I can get. Here is the code:

<style>
logo-carousel{
display:block;
overflow:hidden
}
logo-carousel.logo-carousel{
margin:25px 0;
}
@media (min-width: 992px){
logo-carousel.logo-carousel{
margin:40px 0;
}
}

logo-carousel .logo-carousel__container{
display:flex;
height: 90px;
}
logo-carousel .logo-carousel__images{
-webkit-animation-name:animate;
animation-name:animate;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-duration:var(--imgSpeed);
animation-duration:var(--imgSpeed);
display:flex;
align-items: center;
}
logo-carousel .logo-carousel__image{
flex:0 0 150px;
width:150px;
height:175px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
position:relative;
margin: 0 20px;
}

logo-carousel .logo-carousel__image{
flex:0 0 auto;
height:auto
}

logo-carousel .logo-carousel__image.empty{
background-color:#f7f7f9;
border-right:1px solid #E2E2EA
}
logo-carousel .logo-carousel__image.empty:before{
content:"6:7";
left:16px;
bottom:16px;
position:absolute;
font-family:FuturaPT-Heavy,sans-serif;
font-weight:400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color:#e2e2ea;
font-size:30px;
line-height:30px
}
logo-carousel .logo-carousel__image-column{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
display:block
}
logo-carousel .logo-carousel__image img{
display:block;
pointer-events:none;
transition:opacity .32s ease
}
logo-carousel .logo-carousel__image-column img.lazyloaded{
opacity:1;
height: 100%;
}
.logo-carousel__image-column:hover{
opacity:0.8;

}

img[alt="GQ"]{
width: 56px;
height: auto;
opacity: .6;
}
img[alt="BuzFeed"],img[alt="NBC"],img[alt="Esquire"],img[alt="Maxim"]{
width: 90px;
height: auto;
opacity: .6;
}
img[alt="NBC"]{
width: 90px;
height: auto;
opacity: .6;
}
@-webkit-keyframes animate{
to{
-webkit-transform:translateX(-100%);
transform:translate(-100%)
}
}
@keyframes animate{
to{
-webkit-transform:translateX(-100%);
transform:translate(-100%)
}
}
</style>

<logo-carousel class="logo-carousel"><div class="logo-carousel__container">
<div class="logo-carousel__images" style="--imgSpeed: 30s;">


<img src='https://<a href='https://www.linkpicture.com/view.php?img=LPic6484d3c3993ae1356046830'><img src='https://www.linkpicture.com/q/Untitled-1000-t-100-px-1000-t-60-px-1000-t-80-px-1200-t-100-px-1.png' type='' type='image'>

</div>

<div class="logo-carousel__images" style="--imgSpeed: 30s;">


<img src='<a href='https://www.linkpicture.com/view.php?img=LPic6484d3c3993ae1356046830'><img src='https://www.linkpicture.com/q/Untitled-1000-t-100-px-1000-t-60-px-1000-t-80-px-1200-t-100-px-1.png' type='' type='image'>
</div>

</div>
</logo-carousel> 

[Zqdo]

Let's do it. Starting with your first point, you mentioned that you want the slider to look proper on mobile. What exactly do you mean by that?