Проблемы с медиа-запросами CSS

Наша команда плохо знакома с адаптивным дизайном и пытается писать код с помощью фреймворка для мобильных устройств. Мы пытаемся использовать медиа-запросы для увеличения размера экрана, но не можем заставить его работать правильно. Вот как выглядит наш CSS:

.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;
  }
}

Результат этого выглядит следующим образом, когда мы устанавливаем размер экрана ровно 1024 пикселей:

Когда мы проверяем div, похоже, что оба медиа-запроса css для 480px и 1024px запускаются. Что мы здесь делаем неправильно?

Обновлено: добавление 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>
          <!--<a href = "?id=hri_task_details&table=sn_hr_core_task&sys_id = {{task.sys_id}}" id = "task_{{$index}}">{{::task.short_description}}</a>-->
          <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>