Hide empty option value with css on mobile and tablet devices

Question

I use a wordpress 6.4.1 website with a booking reservation page.

On this booking reservation page, I have a dropdown list, then customers could selected how many attendees. My problem is on this dropdown list where on the first selected option I have the number "1" and the others selected options are correct (1 person, 2 persons, 3 persons, 4 persons, 5 persons and 6 persons). I haven't insert this number "1" on my sleceted list. I don't know if this is a problem with select2.js or not. The plugin booking reservation is ok because I have verify it with the editor owner plugin.

Here is below the code of my selected dropdown list:

<select name="sln[nombre_de_personnes]" id="sln_nombre_de_personnes" required="required" data-placeholder="Select an option" class="" autocomplete="off">

<option value="">1</option>
<option value="1 personne">1 personne</option>
<option value="2 personnes" selected="selected">2 personnes</option>
<option value="3 personnes">3 personnes</option>
<option value="4 personnes">4 personnes</option>
<option value="5 personnes">5 personnes</option>
<option value="6 personnes">6 personnes</option>
</select>

On a web browser I managed to hide the first selection (1) of the drop-down menu using the CSS code below. On the other hand, this same CSS does not work if I view the drop-down menu from a mobile or tablet.

Below is the code that works on a PC browser :

@media only screen and (min-width: 600px) {
#sln-salon select option[value=""] {
     display: none !important;
 }
}

Can you help me by giving me the exact code to insert in the custom CSS code to hide this drop-down menu line containing the number "1" on mobile and tablet devices ?

Thanks for your help.

I tried to hide on mobile and tablet devices an empty option on a dropddown menu on a wordpress website.