.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

  .no-gutters > .col,
  .no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }

.grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: -5px; 
    margin-top:0;
}
@media(max-width:992px) {
    .grid {
        margin:0;
    }
}

.grid-group {
    width: 100%; 
    display: flex; /* Make this a flex container */
    flex-wrap: wrap; /* Allow items within the group to wrap */
    background-color: var(--secondary-gray-4);
}

/* EDITED */
.grid-item { 
    width: 25%; 
    padding: 10px 5px; 
    box-sizing: border-box;
}
@media(max-width:576px) {
    .grid-item {
        width: 50%;
    }


    .grid-group-even .grid-item:not(.grid-item-33):nth-child(4n+1),
    .grid-group-even .grid-item:not(.grid-item-33):nth-child(4n+2) {
        background-color: var(--secondary-gray-4);
    }


    .grid-group .grid-item:not(.grid-item-33):nth-child(4n+3),
    .grid-group .grid-item:not(.grid-item-33):nth-child(4n+4) {
        background-color: var(--white);
    }
}
.grid-group-even {
    background-color: var(--white);
}

.grid-item-33 {
    width:33.333%;
}