Whats the problem with the media queries here?

Can anyone help me out with the media query issue where I've got stuck for days already.

It seems that everything is fine. I've even checked the same layout on codepen just to check myself but it works there, and doesn't work in the project.

that's my meta I usually use

 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />

@mixin grid-wrapper($fr, $width: 70%, $gap: 15px) {
    display: grid;
    grid-template-columns: repeat($fr, 1fr);
    gap: $gap;
    padding: 0 $gap;
    margin: 0 auto;
    max-width: $width;
    @content;
}

mobile css - basement

#advantages {
    position: relative;
    @include grid-wrapper(12, 100%);

    h3 {
        grid-column: 1/13;
    }

    .adv-wrapper {
        grid-column: 1/13;

        div {
            position: relative;
            grid-column: span 12;
    }
}

@media screen and (min-width: 500px) {
    #advantages {
        h3 {
            font-size: 1.5em;
        }

        .adv-wrapper {
            grid-column: 2/12;
            justify-self: center;
        }
    }
}

@media screen and (min-width: 679px) {
    #advantages {

        h3 {
            grid-column: 1/13;
        }

        .adv-wrapper {
            grid-column: 1/13;

            div {
                grid-column: span 4;
            }
        }
    }
}

In the last media query (679) span doesn't work. And I've got many similar circumstances when medias don't work.

I hope you can help me figure out the issue...