vue js media queries - css

Question

Daer all,
i use vue js 3, vue router and vuex. in dependencies were installed node-sas and sass-loader.
I have changed all style tags to lang="css".
In the example below, i tried to setup a mediaquery rule for small devices but... it daes not work att all. No error message appears in the terminal and on the browser inspector, this small devices rules styme daes not appear.
i do not want to use sass but simply use css only.
thank you for your help, i am completly lost.
<template>
<div class ="grp-header">
<div class ="grp-header__logo">
<img src = "#/assets/logogrp.png" alt="logo de groupomania">
</div>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
text: "Mon beau site"
};
}
};
</script>
<style lang="css" scoped>
.grp-header {
display:flex;
padding: 30px;
background-color: white;
height: 200px;
justify-content: flex-start;
align-content: center;
border-style: solid;
border-width: 5px;
border-color: #4E5166;
margin: auto;
width:100%;
}
#media only screen and (max-width: 600px) {
.grp-header {
height: 100px !important;
}
}
.grp-header__logo {
display:flex;
background-color:white;
}
</style>

Answer 1

It should work, I just created a below code snippet and it's working fine. Please have a look and try to find the root cause by taking the reference.
const app = Vue.createApp({
data () {
return {
message: 'Hello Vue!'
}
}
})
app.mount('#app')
.grp-header {
height: 50px;
background-color: yellow;
}
#media only screen and (max-width: 600px) {
.grp-header {
height: 100px;
background-color: #f00;
}
}
<script src="https://unpkg.com/vue#3.0.0-rc.5/dist/vue.global.js"></script>
<div id="app">
<p class="grp-header">{{ message }}</p>
</div>