メディアクエリを使用してモバイルビューに割り当てられたスタイルがデスクトップビューに継承されないようにするにはどうすればよいですか？

APIからデータを取得してページに表示するReactを使用してWebアプリを作成しています。私はレスポンシブウェブデザインの初心者なので、メディアクエリを試していました。したがって、モバイルビュー、つまりmin-width：320pxの場合、divに設定したかったdisplay:flexので、行と列をその子コンポーネントに割り当てたところ、すべてが正常に見えました。しかし、デスクトップモードで表示しようとすると、それでもフレックスコンテナのままでした。デスクトップのメディアクエリを明示的に呼び出し、ディスプレイをブロックに割り当ててみましたが、変更はありません。

@media only screen and (min-width:320px){

  .form{
    grid-template-rows: auto 1fr auto;
    align-items: center;
  }

  .input{
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .movie-card{
    padding: 1rem 2rem;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
    margin-bottom: 2rem;
    background-color: white;
    color: black;
    display: flex;
    flex-direction: column;
  }

  .movie-top{
    display: flex;
    flex-direction: row;
    word-wrap: break-word;
  }
  .movie-top-left{
    display: flex;
    flex-direction: column;
  }

  .movie-top img{
    width:150px;
    border-radius: 10px;
  }

  .card--title{
    margin-bottom: 0.5rem;
    font-size: 2rem;
  }

}

これはモバイルビューのメディアクエリです。デスクトップの場合、ムービーカードをフレックスコンテナにしたくありませんが、要素を検査すると、フレックスコンテナであることがわかります。