Why are css properties not working correctly in vue?

Question

css

There are 2 components:

<style scoped>

        @media print {
            .calc-print{
                
            }

        }


</style>


<style scoped>
    @media print {
        @page {
            size: portrait;
        }
    }
</style>

The problem is that 1 does not work, and if you remove the second, then everything is ok. As I see it, scoped is the problem - it doesn't work for some reason.
PS Previously, it was possible to select the orientation, but after switching to sass, the orientation cannot be selected when printing. How to be advise?

Answer 1

So combine styles under one style scoped tag