سوال media query

اگه جای دو مدیا رو عوض کنم، ستون های من تغییر میکنه !!!! چرا
یه چیز دیگه، چجوریه که اگه من مثلا background-color بدم به یکی از مدیا ها، باتوجه به اینکه مدیا دیگه ای رو بروزر داره اجرا میکنه، باز هم رنگ اعمال میشه!؟

کد HTML:

---

@media screen and (min-width: 40em){
    section.cards{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    section.cards article{
        display: flex;
        flex: 0 1 calc(50% - 1em);
        background-color: red;
    }
}

@media screen and (min-width: 60em){
    section.cards article{
        flex: 0 1 calc(34% - 1em);
       
    }
}

---

در سی اس اس ها وقتی که سلکتور یکسان باشه (ویژگی یا Specificity)، اونی اعمال خواهد شد که قبلی رو override یا باطل کنه.
در مثال شما، در مدیا اول گفتید که اسکرین هایی که عرضشون 40em به بالاست این استایلها رو بگیرن.
در مدیا بعدی گفتید که اسکرینهایی که عرضشون 60em به بالست استایلها رو بگیرند.
مرورگر وقتی ببینیه که مثلا عرض فعلی صفحه 100em هست و هر دو مدیا بالا صدق میکنند، اونی که پایین تر و آخرتر اومده رو اعمال خواهد کرد.

بجای min-width میتونید از max-width استفاده کنید.
پ.ن، همیشه سعی کنید کدهایی که مینویسید رو به زبان محاوره ای ترجمه و بعد توی ذهن تحلیل کنید تا پیشبینی کنید که چه اتفاقی خواهد افتاد