CSS Grid not resizing on media query with new grid-template-columns

.footerGrid {
  display: grid;

  grid-template-columns: 1fr 1fr auto 2fr;
  gap: 1rem;
}

.footerGrid h3,
.footerGrid a {
  color: var(--primary-100);
  font-family: 'Montserrat';
}

.footerGrid > nav > ul > li {
  list-style: none;
  margin-bottom: var(--spacing-xxs);
}

.footerGrid h3 {
  font-weight: 400;
}

.footerGrid nav h3 {
  margin-bottom: var(--spacing-xs);
}

.footerGrid input {
  width: calc(100% - 1rem);
  background-color: var(--primary-700);
  color: var(--primary-100);
}

.footerGrid form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content;

  gap: 0.75rem;
}

.footerGrid form h3,
.footerGrid form input:nth-child(4) {
  grid-column: 1/3;
}

.footerGrid button {
  font-size: 1rem;
  font-weight: 400;
}

.footerPadding {
  padding: var(--spacing-l);
}

@media screen and (max-width: 1000) {
  .footerGrid {
    grid-template-columns: 1fr 1fr;
  }

  .footerGrid nav:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .footerGrid nav:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  .footerGrid img {
    grid-column: 1/3;
    grid-row: 2/3;
  }

  .footerGrid form {
    grid-column: 1/3;
    grid-row: 3/4;
  }
}