Bardziej eleganckie i uniwersalne od tego, co napisał @axelbest, będzie zmiana w CSS, w linii 18tej:
.hidden.hidden {
Jest to lepsze dlatego, że !important jest takim działem ostatecznym, jak już nic innego nie pomaga. Jeśli użyjesz go, to nie znajdziesz już nic mocniejszego od !important.
Natomiast stosując powtórzenia nazwy klasy możesz stopniować ważność selektorów dowolnie. .hidden.hidden.hidden
będzie jeszcze ważniejsze od .hidden.hidden
. Dodatkowo, !important musiałbyś powtarzać przy każdym atrybucie, na którym ci zależy, a powtórzenie nazwy klasy działa dla wszystkich wymienionych atrybutów.
Jeszcze jedną opcją jest przeniesienie tego fragmentu:
.hidden {
background-image: url("img/background_card.svg");
background-repeat: no-repeat;
background-size: 80%;
background-position: center;
background-color: #0f6a39; }
Na koniec pliku - tak, by znalazł się za .dog, .cat i resztą.