/* Step 2: center things inside the grid-m */


.grid-m {
  text-align: center;
  width: 100%; 
  margin: 0;
}


/* Step 3: set the default width for grid-m items to 100%. Also reset the display property for <img> tags */

.grid-m-item,
.grid-m-item>.img-wrap>img {
  width: 100%;
  object-fit: cover;
  display: inline-block;
  border-radius: 5px;
}

.grid-m-item,
.grid-m-item>img {
  width: 100%;
  object-fit: cover;
  display: inline-block;
  border-radius: 5px;
}

.grid-m-item>.img-wrap {
  background-color: #ededf4;
  border-radius: 5px;
}


/* Step 4: how big should the gap be between grid-m items? rember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding */

.grid-m-item {
  padding: 5px;
}

.grid-m-item:hover .img-wrap {
  background-color: black;
}

.grid-m-item:hover img {
  opacity:0.8;
}

/* Step 5: Add media queries (subjective) to make the whole grid-m resposive. Don't forger to compnsate for the padding by using calc() when setting item width */

@media (min-width: 501px) {
  .grid-m-item {
    width: calc(50% - 10px);
  }
  .grid-m{
    margin: 0.7rem;
  }
}

@media (min-width: 1000px) {
  .grid-m-item {
    width: calc(33.333% - 10px);
  }
}

@media (min-width: 1700px) {
  .grid-m-item {
    width: calc(25% - 10px);
  }
}

@media (min-width: 2100px) {
  .grid-m-item {
    width: calc(20% - 10px);
  }
}