.card {
  border: 1px solid #d3d3d3;
  border-radius: .5rem;
}

.bg-img {
  background-size: cover;
  min-height: 180px;
  background-position: center;
  background-color: #ccc;
}

.content {
  padding: 15px;
}

button {
  background-color: transparent;
  border: 1px solid #2196F3;
  padding: .5rem 1rem;
  cursor: pointer;
  border-radius: .25rem;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
}

.center-cropped {
        object-fit: cover;
        object-position: center;
        height: 180px;
        width: 100%;
      }
      
      
/*
One card spanning two columns 

.grid-container .card:first-child {
   grid-column: span 2;
}

One card spanning two rows
.grid-container .card:first-child {
   grid-row: span 2;
}


https://www.atyantik.com/creating-card-layout-with-css3-grid/

*/