CSS not working to make Hero widget responsive

Good morning!

Based on previous threads, I thought I could figure this out, but it’s not working well. I wanted to make my Hero widget responsive, so I triplicated it (3 widgets in 1 row), set different sizes in spacers according to mobile, tablet, and desktop resolutions, and set CSS classes to each. However, when I look at the site, only the “tablet” size seems to be working.

Here’s my site, still in dev. form: http://www.thecfr.com.php56-30.ord1-1.websitetestlink.com/
Right now, I only have this setup on the home page, as I was testing it out. I’d like to get it replicated on all my pages, however, if it works.

Here’s everything that’s currently on my Custom CSS:

#masthead {
z-index: 500 !important;
}
@media only screen (max-width: 768px){
html body .tablet-size {
display: none !important;
}
html body .desktop-size {
display: none !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px){
html body .mobile-size {
display: none !important;
}
html body .desktop-size {
display: none !important;
}
}
@media only screen (min-width: 1024px){
html body .mobile-size {
display: none !important;
}
html body .tablet-size {
display: none !important;
}
}

Any thoughts as to what I’m doing wrong here? (Note, I’m still very new to any CSS — I copied what I’d seen previously written, changed the pixel sizes and class “tags” accordingly, and added !important. I’m still not comfortable writing new CSS from scratch, so please keep that in mind when telling me what to do!)

Thank you!