HTML, SCSS/CSS, JavaScript for Accordion Card

I do have a question regarding this project that I would like some help on so thank you in advance to anyone who is able to give an answer.

I added my SCSS to my GitHub repository since the question I have pertains to the code inside that file and not the CSS one. I have a class with the name of .box-img that belongs to the box image for the desktop version.

I had set it as display: none for my mobile scss. But once I got to my desktop media query and set it to display: block to show the image it simply would not show, I tried to figure out why but couldn't. Not until I went into my mobile scss and took the box-img out of its nested position within #card and put it outside of any nested environment as shown on Line 104 of my file. Finally, it ended up showing on the desktop. Now my question is does anybody know why this happened? Is there a rule that I'm not aware of that applies to nested elements within SCSS?

If you also take the time to look through my project and have any other useful tips or best practices you think would be beneficial, please don't hesitate to comment them. I really appreciate anyone who takes the time to do so!