/* style */
.grid { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  margin-top: 30px;
  }
.grid > article {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
}
.grid > article1 {
  border: 1px solid #ccc;
  background-image: url(https://www.w3schools.com/css/img_flwr.gif), url(https://www.w3schools.com/css/paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
}

.grid > article2 {
  border: 1px solid #ccc;
  background-image: url(https://www.w3schools.com/css/paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
}
.grid > article3 {
  border: 1px solid #ccc;
  background-color: none;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
}
.grid > article4 {
  border: 1px solid #ccc;
  
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
}
.grid > article img {
  max-width: 100%;
}
.text {
  padding: 0 20px 20px;
}
.text > button {
  background: gray;
  border: 0;
  color: white;
  padding: 10px;
  width: 100%;
  }
.grid > article:nth-child(1) {
  grid-column: span 1;
}