<div class="container">
  <div class="grid">
    <section class="card">
      <img class="card__image" src="https://instagram.fcpq7-1.fna.fbcdn.net/v/t51.2885-15/e35/c0.134.1080.1080a/s480x480/100950422_107294477568345_5160600662488912570_n.jpg?_nc_ht=instagram.fcpq7-1.fna.fbcdn.net&_nc_cat=109&_nc_ohc=s_7bc539fvsAX_6Z2Jl&oh=cb8715ad527dbfd092ec5d2b406b4347&oe=5F321760" alt="Cat">
      <div class="card__content">
        <h1 class="card__title">Lorem ipsum dolor</h1>
        <p class="card__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium sint veniam quibusdam rerum mollitia, delectus in quae minus architecto minima ut soluta, voluptatibus, quaerat explicabo tempore totam consequuntur molestias similique.</p>
      </div>
    </section>

    <section class="card">
      <img class="card__image" src="https://instagram.fcpq7-1.fna.fbcdn.net/v/t51.2885-15/e35/c0.134.1080.1080a/s480x480/100064088_254376579112633_164273285046139794_n.jpg?_nc_ht=instagram.fcpq7-1.fna.fbcdn.net&_nc_cat=101&_nc_ohc=zp1Bpxvw2kAAX8HxqOt&oh=23d3daf994343abd9953724cd3ea673d&oe=5F327570" alt="Cat">
      <div class="card__content">
        <h1 class="card__title">Lorem ipsum dolor</h1>
        <p class="card__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium sint veniam quibusdam rerum mollitia, delectus in quae minus architecto minima ut soluta, voluptatibus, quaerat explicabo tempore totam consequuntur molestias similique.</p>
      </div>
    </section>

    <section class="card">
      <img class="card__image" src="https://pbs.twimg.com/media/EVvpvuuXgAAhyRA?format=jpg&name=large" alt="Cat">
      <div class="card__content">
        <h1 class="card__title">Lorem ipsum dolor</h1>
        <p class="card__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium sint veniam quibusdam rerum mollitia, delectus in quae minus architecto minima ut soluta, voluptatibus, quaerat explicabo tempore totam consequuntur molestias similique.</p>
      </div>
    </section>
  </div>
</div>
:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space: 24px;
  --space-md: 32px;
  --space-lg: 48px;
  --space-xlg: 64px;
  --screen-xs: 360px;
  --screen-sm: 768px;
  --screen-md: 992px;
  --screen-lg: 1280px;
  --screen-xlg: 1440px;
}

html {
  font-size: 10px;
}

body {
  background-color: #f1f1f1;
  color: #222;
  font-family: "Open Sans", sans-serif;
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--screen-lg);
  padding: var(--space);
}

.grid {
  display: grid;
  grid-column-gap: var(--space);
  grid-row-gap: var(--space);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.card {
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
  border-radius: var(--space-xs);
  display: flex;
  padding: var(--space);

  & > :not(:last-child) {
    margin-right: var(--space-md);
  }

  &__image {
    background-color: #ddd;
    display: block;
    height: 30rem;
    object-fit: cover;
    width: calc(100% / 3);
  }

  &__title {
    font-size: 2.4rem;
    font-weight: 600;

    &:not(:last-child) {
      margin-bottom: var(--space-xs);
    }
  }

  &__text {
    font-size: 1.6rem;
    line-height: 2.1rem;
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.