Responsive settings don't overlap - missing 600px and 960px

[thompalstra]

Description

The Responsive feature (for Section blocks, etc) does not seem to work properly. The breakpoints themselves (600px, 960px) are being skipped due to the min-max width specified.

Step-by-step reproduction instructions

1. Create 3 Otter Sections, with one Otter Section Column and add paragraphs to each column
2. Set the content to the columns to, desktop, tablet and mobile respectively
3. Set the desktop column to only be displayed on desktop (hide on tablet, hide on mobile)
4. Set the tablet column to only be displayed on tablet (hide on desktop, hide on mobile)
5. Set the mobile column to only be display on mobile (hide on desktop, hide on tablet)
6. Save and view your page
7. None of the columns will be displayed on width 600px en 960px

Screenshots, screen recording, code snippet or Help Scout ticket

When set to Hide this section on Desktop devices and Hide this section on Tablet devices, the element will be hidden up to screen width 600px.
When set to Hide this section on Tablet devices and Hide this section on Mobile devices, the element will also be hidden up to screen width 600px.

This issue can be fixed as shown below:

The .hide-in-mobile media should be be set to 599px in stead of 600px, causing "tablet" to be shown from 600px in stead of 601px:

@media (max-width: 599px) {
    .wp-block-themeisle-blocks-advanced-columns.hide-in-mobile {
        display: none;
    }
}

The .hide-in-tablet media query should be set to 959px in stead of 960px, causing "desktop" to be shown from 960px in stead of 961px:

@media (min-width: 600px) and (max-width: 959px) {
    .wp-block-themeisle-blocks-advanced-columns.hide-in-tablet {
        display: none;
    }
}

Environment info

No response

Is the issue you are reporting a regression

No