.arrow_trenner_section {
    padding: 0 0 100%;
    position: relative;
}

@keyframes trenner {
    0% { top: 0; transform: translate(-50%,0); opacity: 1;}
    66% {top: 100%; transform: translate(-50%,-100%); opacity: 0;}
    100% {top: 100%; transform: translate(-50%,-100%); opacity: 0;}
  }

.arrow_trenner_section .trenner_item {
    position: absolute; top: 0; left: 50%;
    width: 50%; padding: 0 0 50%; opacity: 0;
    transform: translate(-50%,0);
    animation-name: trenner;
    animation-duration: 4.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.arrow_trenner_section .trenner_item:nth-child(1) {animation-delay: 0;}
.arrow_trenner_section .trenner_item:nth-child(2) {animation-delay: 1.5s;}
.arrow_trenner_section .trenner_item:nth-child(3) {animation-delay: 3s;}

.arrow_trenner_section .trenner_item img {
    position: absolute; top: 0; left: 0%;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
}


@media screen and (min-width: 40em){
    .arrow_trenner_section {
        padding: 0 0 50%;
    }
    .arrow_trenner_section .trenner_item {
        width: 25%; padding: 0 0 25%;
    }
}


@media screen and (min-width: 110em){
    .arrow_trenner_section {
        padding: 0 0 30%;
    }
    .arrow_trenner_section .trenner_item {
        width: 15%; padding: 0 0 15%;
    }
}