Resolve "Improper use of bootstrap media query variables"

What does this MR do?

Corrects media queries which are off by 1px due to incorrect $screen-{xs,sm,md,lg}-min usage.

Are there points in the code the reviewer needs to double check?

Ensure none of these errors were somehow intentional (I can't imagine a legitimate use case for @media (max-width: $screen-sm-min) though)

Why was this MR needed?

When "min" breakpoints are used for "max-width" media queries, they create an overlap in rule breakpoints. For instance in the following scenario:

.foo {
  @media (min-width: $screen-sm-min) {
    width: 100px;
    padding: 0;
  }
  @media (max-width: $screen-sm-min) {
    padding: 10px 0;
  }
}

If the viewport were set to exactly $screen-sm-min pixels, both of these media queries would apply. It is important to use max-width: $screen-xs-max in this case which is equal to $screen-sm-min - 1.

Does this MR meet the acceptance criteria?

• Changelog entry added
• Documentation created/updated
• API support added
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #25198 (closed)