CSS - podświetlanie miniatur

pytanie zadane 20 stycznia 2021 w HTML i CSS przez Kogucik Nowicjusz (120 p.)

Witam. Posiadam taki oto kod, a tu w praktyce.

Ogólnie sprawa polega na tym, że chciałbym zmniejszyć odstęp miniatur (tak żeby w jednym wierszu mieściło się więcej niż 4, a najlepiej aby były responsywne), jednak za nic w świecie nie potrafię tego zrobić. Nie wiem jak się do tego zabrać. Nie jestem twórcą kodu (bo z CSS znam jedynie podstawy podstaw), jednak lekko go przerobiłem. Od razu powiem, że autor kodu pozwolił na kopiowanie, a sam nie odpisuje na wiadomości, więc nie mam jak się go zapytać o poradę.

"Odkryłem", że za zmianę odstępów między miniaturami odpowiada ta linia

.hide {
    margin: 20px calc((25% - 229px) / 2) 20px calc(((25% - 229px) / 2) - 20px);
}

a przynajmniej tak mi się wydaje, ponieważ podczas edycji tej linii zmienia się ilość miniatur w wierszu. Głównym problemem jest to, że podświetlenie tych miniatur się nie przenosi, albo ustawia się w zupełnie innym miejscu (czyli nie "podąża" za miniaturami). Próbowałem najróżniejszych sposobów, kombinowałem z tym marginesem, próbowałem używać właściwości "position", "display", "left" etc, ale nic nie skutkowało.

Ponadto pomniejszym problemem jest to, że po edycji marginesu miniatury w kolejnym wierszu mają trochę mniejszy margines, więc są bardziej zbliżone do lewej krawędzi ekranu względem pierwszego wiersza.

To tyle. Bardzo proszę o pomoc, a jeżeli czegoś ważnego nie dopisałem albo źle opisałem, to przepraszam i oczywiście w razie potrzeby dopowiem. Pozdrawiam i z góry dziękuję.