Does not show flex to change if @media (max-width: 997px)

[zymir]

Is there depends on the browsers?

.articles-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: stretch;
    .item {
        margin-top: 0;
        margin-right: 5px;
        margin-bottom: 20px;
        margin-left: 5px;
        align-self: flex-start;
        flex: 1 0 30%;
    }
}
@media screen and (max-width: 991px) {

.item {

flex: 1 0 48%;

}

}

[kalena]

.articles-list {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        align-content: stretch;
        .item {
            margin-top: 0;
            margin-right: 5px;
            margin-bottom: 20px;
            margin-left: 5px;
            align-self: flex-start;
            flex: 1 0 30%;
        }
}

@media screen and(max-width: 997px) { 
  .articles-list {
    .item {
        flex: 1 0 48%;
    }
  }
}

or

 .articles-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: stretch;
    .item {
        margin-top: 0;
        margin-right: 5px;
        margin-bottom: 20px;
        margin-left: 5px;
        align-self: flex-start;
        flex: 1 0 30%;

      @media screen and(max-width: 997px) {   
          & {
              flex: 1 0 48%;
          }
      }
    }

}