Изменение размера спрайтов CSS для мобильных представлений

Question

Так что в основном я пытаюсь заставить кучу CSS-спрайтов хорошо выглядеть на мобильных устройствах, они отлично выглядят на рабочем столе и сидят именно там, где я хочу, как показано на этом рисунке вид на рабочем столе

Проблемы начинаются при просмотре на мобильном телефоне, я пытался использовать @media в паре с 50% или 50px css, но я просто не могу понять.

Вот как это отображается сейчас на мобильном телефоне мобильный сейчас , но, как вы можете видеть, он слишком велик, и в сторону.

Я пытаюсь, чтобы он выглядел так получился так

Вот код, который я использовал для реализации моих css-спрайтов на рабочем столе, так что в двух словах, как мне заставить их отображаться так, как показано на рисунке выше в мобильном телефоне?

/* sprites desktop */
.sprite{ width: 200px; height: 114px; background-image: url('https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/05/css_sprites-1.jpg') ; display: inline-block; margin: 0 10px 0 0; }

#beauty{ background-position: -260px -20px;
margin: 20px 20px 0 10px;}

#beauty:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#food{ background-position: -500px -328px; margin: 20px 20px 0 10px; }

#food:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#kids{ background-position: -20px -174px; margin: 20px 20px 0 10px; }

#kids:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#organic{ background-position: -260px -174px; margin: 20px 20px 0 10px; }

#organic:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#pet{ background-position: -20px -328px; margin: 20px 20px 0 10px; }

#pet:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#fitness{ background-position: -260px -328px; margin: 20px 20px 0 10px; }

#fitness:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#fashion{ background-position: -500px -20px; margin: 20px 20px 0 10px; }

#fashion:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#home{ background-position: -500px -174px; margin: 20px 20px 0 10px; }

#home:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#book{ background-position: -20px -20px; margin: 20px 20px 0 10px; }

#book:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#international{ background-position: -20px -482px; margin: 20px 20px 0 10px; }

#international:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#craft{ background-position: -260px -482px; margin: 20px 20px 0 10px; }

#craft:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#mens{ background-position: -500px -482px; margin: 20px 20px 0 10px; }

#mens:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#period{ background-position: -740px -20px; margin: 20px 20px 0 10px; }

#period:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#adult{ background-position: -740px -174px; margin: 20px 20px 0 10px; }

#adult:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#gift{ background-position: -740px -328px; margin: 20px 20px 0 10px; }

#gift:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#collectables{ background-position: -740px -482px; margin: 20px 20px 0 10px; }

#collectables:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#misc{ background-position: -20px -636px; margin: 20px 20px 0 10px; }

#misc:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#adult{ background-position: -740px -174px; margin: 20px 20px 0 10px; }

#adult:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#popular{ background-position: -740px -636px; margin: 20px 20px 0 10px; }

#popular:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#all{ background-position: -503px -636px; margin: 20px 20px 0 10px; }

#all:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

#drinks{ background-position: -258px -637px; margin: 20px 20px 0 10px; }

#drinks:hover{  
                border-width: 1px;
        border-style: solid;
                border-color: blue;
                }

Спасибо, ребята