Chain css media and container queries

Question

How can I combine queries like this so I dont repeat css code? Every query works on its own but not together.

I want media to be used as fallback if container queries dont work. I know media is applied to whole page width, while container queries only to element width.

.card-container {
  container-type: inline-size;
  container-name: mvp_dialog_data;
}

@container mvp_dialog_data (max-width: 1250px),
@media (max-width: 1250px) { 
   .links {
        display: none;
    }
}

<div class="card-container">
  <div class="card">
    
      <div class="meta">
        <span class="time">5:30</span>
      </div>
      <div class="notes">
        <div class="links">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
      </div>

    </div>
  </div>
</div>

Answer 1

If I understand what you want you only need to move your @media query into your @container:

.card-container {
  container-type: inline-size;
  container-name: mvp_dialog_data;
}

@container mvp_dialog_data (max-width: 1250px){
  @media (max-width: 1250px) { 
   .links {
        display: none;
    }
  }
}

<div class="card-container">
  <div class="card">
      <div class="meta">
        <span class="time">5:30</span>
      </div>
      <div class="notes">
        <div class="links">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
      </div>
  </div>
</div>

Answer 2

You can't combine the @media and @container at-rules. To the best of my knowledge, a proper CSS-only fallback will have to provide separate styles.

/* Fallback */
@media (max-width: 1250px) {
  .links {
    display: none;
  }
}

/* Container queries */
@container mvp_dialog_data (max-width: 1250px) {
  .links {
    display: none;
  }
}

/* Feature detection */
@supports (container-type: inline-size) {
  .container {
    container: mvp_dialog_data / inline-size;
  }
}