css: мобильный стиль переопределяется вложенным css

У меня есть элемент с двумя селекторами. Когда я уменьшаю экран для просмотра на мобильных устройствах, я по-прежнему вижу, что ширина соответствует ширине isActive вместо ширины 100% класса @include tablet-down. В Chrome я вижу, что он распознает ширину мобильного устройства, но класс isActive имеет более высокую специфичность, поэтому он переопределяет его. Как лучше всего справиться с этим, чтобы он учитывал ширину для мобильных устройств?

<div class="main isActive>

</div>  




.main {
   position: relative;
   width: 360px;

  &.isActive {
    width: calc(100vw - 500px);
  }

  @include tablet-down {
     flex: 0;
     width: 100%;
  }
}