Why is my CSS using the fallback over the grid layout even thought the browser supports grid layout?

Question

Before adding a grid fallback, chrome was displaying my grid layout correctly. After I added my fallback it defaults to the fallback regardless of placement of the fallback within my CSS. If I place it before or after my layout it doesn't matter it still defaults to the fallback. I'm still learning and I am sure the problem is something simple that I have missed but I have not been able to figure out the solution. An explanation to what I did wrong would be greatly appreciated.

https://codepen.io/Moises-Ruelas/pen/oNOgLNw

/* start grid fallback */
.grid__item{
  display: inline-block;
  width: 33%;
}
/* end grid fallback */

@supports (display: grid) {
  .projects {
    display: grid;
    /* grid-template-columns: 300px 300px 300px; fractions are better than pixels - they are responsive */
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    margin: 0;
  }
  
  .grid__item {
    color: black;
    background-color: lightgray;
  }
  
  .header_text {
    display: flex;
    justify-content: center;
    text-align: center;
  }
  
  .grid-link {
    color: #357b70;
  }
  
  .grid__item:last-child {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
  }
}

I have tried placing the fallback both after and before the grid layout but it still defaults to showing the fallback over the grid layout. I was expecting either option to cause the css to apply the grid layout over the fallback. I also tried commenting out the fallback and obviously that makes it so the grid layout is the only one available.