Broken layout using grid

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 monitor and the screen is larger.

In Firefox it works fine on both monitors, but in Chrome it breaks at lower resolution, even though I put a @media to try to improve it.

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

Ex:

Broken Layout HowIwouldlikeyoutostay