<main>
 <section class="grid">
  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
   <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome</h2>
   </div>
   <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
   </div>
   <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
    </a>
   </div>
   <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
   </div>
  </div>
  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
   <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome</h2>
   </div>
   <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
   </div>
   <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
    </a>
   </div>
   <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
   </div>
  </div>
  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
   <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome</h2>
   </div>
   <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
   </div>
   <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
    </a>
   </div>
   <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
   </div>
  </div>
  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
   <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome</h2>
   </div>
   <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
   </div>
   <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
    </a>
   </div>
   <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
   </div>
  </div>
  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
   <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome</h2>
   </div>
   <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
   </div>
   <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
    </a>
   </div>
   <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
   </div>
  </div>
  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
   <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome</h2>
   </div>
   <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
   </div>
   <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
    </a>
   </div>
   <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
   </div>
  </div>
 </section>
</main>

body {
		background-color: #f5f9fa;
}

.mdl-card {
	width: inherit;
}

.demo-card-wide > .mdl-card__title {
	color: #fff;
	height: 176px;
	background: url("https://source.unsplash.com/user/plloyd") center / cover;
}
.demo-card-wide > .mdl-card__menu {
	color: #fff;
}

main {
	margin-top: 100px;
	padding: 0 calc(50% - 480px);
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: minmax(150px, auto);
	grid-gap: 40px;
}