Media query not working in React

I'm trying to hide an image when the screen/viewport has a width over 900px. For some reason, this is not working in a very basic example.

I have an extremely simple component for my footer -- it's functional, no state or methods, and it's only nested under the Main component.

I'm including the styles for the footer in the component so it's completely localized. For some reason, in this most basic example, @media doesn't seem to be working.

When I open Chrome devtools, I do see the media query being attached to my element at the appropriate breakpoint, but the style is not being applied even though my screen width is well over 900px. The styles declared in my media query are crossed out. So my element is choosing to maintain the original styles and blocking the media query for some reason. If I add a style in the media query that is not already present in the original class, it is applied.

I have included the following in head in index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

I'm also using React Router (if that makes any difference).

Is React preventing media queries from working? Am I making an extremely dumb mistake somewhere?

Here is my component -- the div with className 'logo' is what I'm trying to toggle:

import React from 'react';
import { Link } from 'react-router-dom';
import './footer.component.css';

function Footer(props) {
  return (
    <div className="footer">
      <span className="column">
        <div className="social-column-container">
          <img className="logo" src="./images/logo.jpg" alt="kimbyarting logo" title="kimbyarting logo" />
          <div className="social-icon-container">
            <div className="social-icon"></div>
            <div className="social-icon"></div>
            <div className="social-icon"></div>
            <div className="social-icon"></div>
            <div className="social-icon"></div>
          </div>
        </div>
      </span>
    </div>
  );
}

export default Footer;

Here's the relevant CSS:

/* Small desktop */
@media only screen and (min-width: 900px) {
  .footer
  .column
  .social-column-container
  .logo {
    display: none;
  }
}

/* Mobile */
.footer
.column
.social-column-container
.logo {
  width: 100px;
  height: auto;

  display: inline-block;
  margin-left: 50px;
}

Any help is greatly appreciated!

Update

If the regular class definition and media definition have the same class hierarchy, the media styles are always overridden. However, if the regular definition has any fewer class hierarchies defined, this works.

I've confirmed, by removing all parent 'display' styles, that no other class immediately seems to be causing the style to override.

What is overriding the styles? Why is this happening when I follow best practices and have a good hierarchy defined for CSS classes?