#media rule not turning off when screen gets larger - css

Question

I have the following in my CSS file, and it works fine apart from the rule around --md and --sm arent turning off when the screen width goes over 899px.
.ProductThumbnail {
position: relative;
overflow: visible;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
&--md,
&--sm {
display: none;
background-position: 30% top;
#include media('sm', true, true) {
display: block;
}
}
&--lg {
display: none;
background-position: 25% top;
width: 1600px;
#include media('md', true) {
display: block;
}
}
}
The return function in the react component is as follows:
return (
<>
<div
className="ProductThumbnail__bg ProductThumbnail__bg--xs"
style={{
backgroundImage: getURL({
w: 600,
h: 455,
}),
}}
/>
<div
className="ProductThumbnail__bg ProductThumbnail__bg--md"
style={{
backgroundImage: getURL({
h: 455,
}),
}}
/>
<div
className="ProductThumbnail__bg ProductThumbnail__bg--lg"
style={{
backgroundImage: getURL({
w: 2560,
h: 1040,
}),
}}
/>
</>
);
I can see in the dev tools that the rules are being applied as expected for --md and --sm but they dont disappear when the screen gets bigger.
Update, media mixin code:
#mixin media(
$breakpoint,
$is-minimum-only: false,
$is-maximum-only: false) {
#if map_has_key($breakpoint-ranges, $breakpoint) {
$breakpoint-range: get-break-point-range($breakpoint);
$breakpoint: "";
#if length($breakpoint-range) < 2 or $is-minimum-only {
$breakpoint: "(min-width:#{nth($breakpoint-range, 1)})";
} #else if $is-maximum-only {
$breakpoint: "(max-width:#{nth($breakpoint-range, 2)})";
} #else {
$breakpoint: "(min-width:#{nth($breakpoint-range, 1)}) and (max-width:#{nth($breakpoint-range, 2)})";
}
#media screen and #{$breakpoint} {
#content;
}
} #else {
#warn "No registered breakpoint for `#{$breakpoint}`";
}
}

Answer 1

if I understand your mixin correctly, it should generate a media-query with "min" and "max" value if there's no "$is-minimum-only" or "$is-maximum-only" set. So in your case I would remove both "true" settings in this line:
#include media('sm', true, true) {
so it looks like this
#include media('sm') {
Now the third case inside the "#if length($breakpoint-range)" statement should take effect.
Not sure if it even makes sense to set both variables to "true". Because they have a "only" in their names, I suppose only one of them should apply at the same time ;)
I hope that helps.