razor ページにて普通に@を記載すると、変数などをレンダリングするものと解釈されてしまうので、エスケープするために@@と記載する。

<style>
  @@media screen and (max-width: 1020px) {
    body {
      color: red;
    }
  }
</style>