REST Countries API with React Router and CSS Grid

I made the country results container with CSS Grid. I gave the property align-items: flex-start to the card because some country flags have different dimensions, so this created different height cards for each card in the row. I wanted to respect the dimensions of each country's flag. One solution would be to set a fixed height to flags in the country card, but then that would shrink taller country flags and put whitespace on either side of those flags.

.container__results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  align-items: flex-start;
}

@media (min-width: 30rem) {
  .container__results {
    grid-template-columns: repeat(2, 1fr);
    gap: 3em;
  }
}

@media (min-width: 55rem) {
  .container__results {
    grid-template-columns: repeat(3, 1fr);
    gap: 4em;
  }
}

@media (min-width: 90rem) {
  .container__results {
    grid-template-columns: repeat(4, 1fr);
    gap: 5em;
  }
}