/* (A) riders CONTAINER */
/* (A1) ON BIG SCREENS */
.riders {
  display: grid;
  grid-template-columns: repeat(3, auto); /* 3 IMAGES PER ROW */
  grid-gap: 10px;
  max-width: 1200px;
  margin: 0 auto; /* HORIZONTAL CENTER */
}
/* (A2) ON SMALL SCREENS */
@media screen and (max-width: 640px) {
  .riders {
    grid-template-columns: repeat(2, auto); /* 2 IMAGES PER ROW */
  }
}
 
/* (B) THUMBNAILS */
.riders img {
  width: 100%;
  height: 400px;
  /* FILL, CONTAIN, COVER, SCALE-DOWN : USE WHICHEVER YOU LIKE */
  object-fit: Contain;
}