HI. Please, how media queries is use in page builder 5 and helix tempaltes. I am using this:

/* Extra small devices (phones) in portrait */
@media only screen and (max-width: 575.98px) and (orientation: portrait) { 
    /* CSS rules for extra small devices in portrait orientation */
}

/* Extra small devices (phones) in landscape */
@media only screen and (max-width: 575.98px) and (orientation: landscape) { 
    /* CSS rules for extra small devices in landscape orientation */
}

/* Small devices (smartphones) in portrait */
@media only screen and (min-width: 576px) and (max-width: 767.98px) and (orientation: portrait) { 
    /* CSS rules for small devices in portrait orientation */
}

/* Small devices (smartphones) in landscape */
@media only screen and (min-width: 576px) and (max-width: 767.98px) and (orientation: landscape) { 
    /* CSS rules for small devices in landscape orientation */
}

/* Medium devices (tablets) in portrait */
@media only screen and (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) { 
    /* CSS rules for medium devices in portrait orientation */
}

/* Medium devices (tablets) in landscape */
@media only screen and (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) { 
    /* CSS rules for medium devices in landscape orientation */
}

/* Large devices (desktops) in portrait */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) and (orientation: portrait) { 
    /* CSS rules for large devices in portrait orientation */
}

/* Large devices (desktops) in landscape */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) and (orientation: landscape) { 
    /* CSS rules for large devices in landscape orientation */
}

/* Extra large devices (large desktops) in portrait */
@media only screen and (min-width: 1200px) and (orientation: portrait) { 
    /* CSS rules for extra large devices in portrait orientation */
}

/* Extra large devices (large desktops) in landscape */
@media only screen and (min-width: 1200px) and (orientation: landscape) { 
    /* CSS rules for extra large devices in landscape orientation */
}

i know sppb doesn't have that detailed breakdown. Still, I'd like to know how it does it so I can adapt my edits to the same conditions. Same with helix ultimate. I want everything to be perfect :)

In the page builder, I can see the device settings for individual elements and their parts also in the graphical interface. Here you have a desktop, 2x tablets and 2x mobile phones. Those are probably the dimensions I'm interested in.

And the second question. If I select the option to hide on a mobile phone for an element in the settings in the page builder, how exactly will it be reflected in the code? Will the element not be visible in the page code at all? Or if I look at the website on a mobile phone, do you just hide the element with display: none? I'm asking to avoid code duplication. Or its unnecessary size.