Broken layout using grid

Question

I’m using a grid system for my layout as seen below:

.artigo {
    margin: auto;
    width: 70vw;
    display: grid;
    grid-template-columns: minmax(200px, 3fr) 1fr;
    margin-top: 90px;
}

@media (max-width: 1400px) {
   .artigo {
      display: grid;
      grid-template-columns: minmax(200px, 2fr) 1fr;
   }
}

@media (max-width: 500px) {
   .artigo {
      padding: 0 12px;
      width: 100%;
      display: block;
      margin-top: 20px;
   }
}

My screen has 1440px resolution on my other screen monitor and higher.

In Firefox is working well on both monitors, but in Chrome it breaks in lower resolution, even if I put one @media to try to improve this.

I’m not sure what I’m doing wrong.

Ex.:

Broken layout How I’d like you to stay