CSS Modules - `compose` defined on `media-query` overrides styling outside of `media-query`

Question

I have a project where css modules works without an issue and recently I started incorporating responsiveness on it. Our current setup is that we have a typography.css where we define several properties for each type of letter size and we do compose to import that setup where we require it. My current use-case is the following.

/* somefile.module.css */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  composes: s-text from '../../styles/shared/typography.css';
}

@media screen and (max-width: 600px) {
  .header {
    composes: xs-text from '../../styles/shared/typography.css';
  }
}

/* typography.css */
.s-text {
  font-size: 14px;
  letter-spacing: -0.01px;
  line-height: 16px;
}

.xs-text {
  font-size: 11px;
  letter-spacing: -0.006px;
  line-height: 14px;
}

Once I started using the media-query, on screen sizes larger than 600px I'm still seeing the composes: xs-text from '../../styles/shared/typography.css';