Issues with media queries CSS - css

Question

Our team is new to responsive design and is trying to code with a mobile first framework. We're trying to use media queries to scale up in screen size, but can't seem to get it to work correctly. This is what our CSS looks like so far:
.flex, .cards, .card {
display: flex;
}
.flex {
flex-wrap:wrap;
}
.cards, .card {
align-items:center;
}
.cards {
padding: 1em;
background-color: $color-lightest;
box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
}
#media screen and (min-width: 480px) {
.cards {
width: 49%;
margin: 1%;
}
.cards:nth-of-type(even) {
margin-right: 0;
}
.cards:nth-of-type(odd) {
margin-left: 0;
}
}
#media screen and (min-width: 1024px) {
.cards {
width: 32%;
margin: 1%;
}
.cards:nth-of-type(3n) {
margin-right: 0;
}
.cards:nth-of-type(3n+1) {
margin-left: 0;
}
}
The result of this looks like this when we set the screen size to exactly 1024px:
When we inspect the div, it looks like both the media queries css for 480px and 1024px are firing. What are we doing incorrect here?
EDIT: adding HTML
<div class="flex" ng-init="init(user.sys_id)">
<div class="cards" ng-repeat="task in data.tasks | orderBy: ['order']" >
<div class="card" ng-click="c.onWidget(task);">
<i ng-if="task.finished" class="{{task.icon}} fa-5x card-img finished" aria-hidden="true"></i>
<i ng-if="!task.finished && task.isOverDue" class="{{task.icon}} fa-5x card-img overdue" aria-hidden="true"></i>
<i ng-if="!task.finished && !task.isOverDue" class="{{task.icon}} fa-5x card-img pending" aria-hidden="true"></i>
<div class="card-content">
<h4>
<!--{{::task.short_description}}-->
<a ng-click="">{{::task.short_description}}</a>
</h4>
<span ng-if="!task.finished">
<span class="text-normal" ng-if="task.due_date">${Due by} {{::task.due_date | date: 'mediumDate' }}
<span class="text-warning" ng-if="task.isOverDue"> (${Overdue})</span>
</span>
</span>
<span ng-if="task.finished" class="text-muted">${Completed at} {{::task.closed_at | date: 'mediumDate'}}</span>
</div>
<div>
<i alt="${Open}" ng-if="!task.finished && task.isOverDue" class="m-l-sm fa fa-square-o fa-2x overdue"></i>
<i alt="${Open}" ng-if="!task.finished && !task.isOverDue" class="m-l-sm fa fa-square-o fa-2x pending"></i>
<i alt="${Completed}" ng-if="task.finished" class="m-l-sm fa fa-check-square-o fa-2x finished"></i>
</div>
</div>
</div>
</div>

Answer 1

Try changing your first media query to this:
#media screen and (min-width: 480px) and (max-width: 1023.99px) {
...
}
.cards:nth-of-type(3n) and .cards:nth-of-type(even) seem to both be applied.

Answer 2

Should the "min-width: 480px" be "max-width: 480px"?
As the CSS is currently defined, once the screen hits the 1024px width, then both min-width conditions are enabled along with the applicable CSS definitions.