Как мне сделать мою CSS анимацию отзывчивой?

Question

https://codepen.io/hk2808/pen/NWqeqbd

Привет, ребята. Я пытался сделать анимацию отзывчивой при просмотре в мобильном устройстве. кто-нибудь есть какие-либо советы, чтобы это произошло :)? или просто советы по улучшению анимации

#container8 {
top: 10vw;
position: absolute;
left: 40vw;
color: blue;
font-size: 2.34375vw;
text-align: center;
}

#flip {
height:4.8828125vw;
overflow:hidden;
}

#flip > div > div {
color:#fff;
padding:5px 5px;
padding-top: 0.3255208333333333vw;
height:2.9296875vw;
margin-bottom:45px;
display:inline-block;
}

#flip div:first-child {
animation: show 5s linear infinite;
}

#flip div div {
background:#48466d;
border-radius: 14px 14px 14px 14px;
}
#flip div:first-child div {
background:#3d84a8;
}
#flip div:last-child div {
background:#abedd8;
}

@keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}