.grid {

  /* Grid Fallback */

  display: flex;

  flex-wrap: wrap;



  /* Supports Grid */

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

  grid-auto-rows: minmax(90px, auto);

  grid-gap: 3em;

  width: 70%;

  margin: 0 auto;

}



.grid img {

  width: 70px;

}



.module {

  /* Demo-Specific Styles */



  display: flex;

  align-items: center;

  justify-content: center;

  height: 130px;

  /* Flex Fallback */

  margin-left: 5px;

  margin-right: 5px;

  flex: 1 1 200px;

  border-radius: 1em;
  filter: drop-shadow(0 0.2rem 0.25rem rgba(2, 0, 0, 0.2));
}



/* If Grid is supported, remove the margin we set for the fallback */

@supports (display: grid) {

  .module {

    margin: 0;

  }

}



@media screen and (max-width: 992px) {

  .grid {

    /* Grid Fallback */

    display: flex;

    flex-wrap: wrap;



    /* Supports Grid */

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

    grid-auto-rows: minmax(90px, auto);

    grid-gap: 1em;

    width: 100%;

    margin: 0 auto;

  }



}