Assorted Cards (Flex + BEM)

index.html

<div class='main-container'>
  <div class='grid-container'>
    <div class='card card--2x'>
      <div class='card__content big-script padding-large'>
        <p>Travel and see the world</p>
      </div>
    </div>
    <div class='card'>
      <div class='card__image'>
        <img src='https://images.pexels.com/photos/443416/pexels-photo-443416.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
      </div>
    </div>
    <div class='card'>
      <div class='card__image'>
        <img src='https://images.pexels.com/photos/542411/pexels-photo-542411.png?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
      </div>
    </div>
    <div class='card'>
      <div class='card__content'>
        <p><em>Travel is fatal to prejudice, bigotry, and narrow-mindedness.</em></p>
        <p>— Mark Twain</p>
      </div>
    </div>
    <div class='card card--horizontal'>
      <div class='card__image'>
        <img src='https://images.pexels.com/photos/614494/pexels-photo-614494.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
      </div>
    </div>
    <div class='card card--featured'>
      <div class='card__side-by-side--m'>
        <div class='card__image'>
          <img src='https://images.pexels.com/photos/1125278/pexels-photo-1125278.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
        </div>
        <div class='card__content padding-large--l'>
          <h2>Quisque volutpat.</h2>
          <p>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit.</p>
          <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
          <div class='card__button'>More...</div>
        </div>
      </div>
    </div>
    <div class='card card--vertical'>
      <div class='card__image'>
        <img src='https://images.pexels.com/photos/920968/pexels-photo-920968.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
      </div>
    </div>
    <div class='card'>
      <div class='card__image'>
        <img src='https://images.pexels.com/photos/386009/pexels-photo-386009.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
      </div>
    </div>
    <div class='card card--horizontal'>
      <div class='card__side-by-side'>
        <div class='card__image'>
          <img src='https://images.pexels.com/photos/885880/pexels-photo-885880.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
        </div>
        <div class='card__content'>
          <h3>Lorem ipsum</h3>
          <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
        </div>
      </div>
    </div>
    <div class='card card--vertical'>
      <div class='card__image'>
        <img src='https://images.pexels.com/photos/450597/pexels-photo-450597.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
      </div>
    </div>
    <div class='card'>
      <div class='card__image'>
        <img src='https://images.pexels.com/photos/269923/pexels-photo-269923.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
      </div>
    </div>
    <div class='card'>
      <div class='card__content'>
        <p><em>We wander for distraction, but we travel for fulfilment.</em></p>
        <p>— Hilaire Belloc</p>
      </div>
    </div>
    <div class='card card--2x'>
      <div class='card__image'>
        <img src='https://images.pexels.com/photos/247929/pexels-photo-247929.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
      </div>
    </div>
    <div class='card card--horizontal card--frameless'>
      <div class='card__content big-script'>
        <p>Bon voyage</p>
      </div>
    </div>
    <div class='card'>
      <div class='card__image'>
        <img src='https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
      </div>
    </div>
    <div class='card card--horizontal'>
      <div class='card__image'>
        <img src='https://images.pexels.com/photos/358319/pexels-photo-358319.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
      </div>
    </div>
    <div class='card'>
      <div class='card__image'>
        <img src='https://images.pexels.com/photos/373912/pexels-photo-373912.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
      </div>
    </div>
    <div class='card'>
      <div class='card__content'>
        <p><em>A good traveller has no fixed plans and is not intent on arriving.</em></p>
        <p>— Lao Tzu</p>
      </div>
    </div>
    <div class='card'>
      <div class='card__image'>
        <img src='https://images.pexels.com/photos/386007/pexels-photo-386007.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260'>
      </div>
    </div>
  </div>
</div>

index.html.haml

.main-container
  .grid-container
    .card.card--2x
      .card__content.big-script.padding-large
        %p Travel and see the world 
    .card
      .card__image
        %img(src="https://images.pexels.com/photos/443416/pexels-photo-443416.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
    .card
      .card__image
        %img(src="https://images.pexels.com/photos/542411/pexels-photo-542411.png?auto=compress&cs=tinysrgb&h=750&w=1260")
    .card
      .card__content
        %p <em>Travel is fatal to prejudice, bigotry, and narrow-mindedness.</em>
        %p — Mark Twain
    .card.card--horizontal
      .card__image
        %img(src="https://images.pexels.com/photos/614494/pexels-photo-614494.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
    .card.card--featured
      .card__side-by-side--m
        .card__image
          %img(src="https://images.pexels.com/photos/1125278/pexels-photo-1125278.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
        .card__content.padding-large--l
          %h2 Quisque volutpat.
          %p Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. 
          %p Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
          .card__button More...
    .card.card--vertical
      .card__image
        %img(src="https://images.pexels.com/photos/920968/pexels-photo-920968.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
    .card
      .card__image
        %img(src="https://images.pexels.com/photos/386009/pexels-photo-386009.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
    .card.card--horizontal
      .card__side-by-side
        .card__image
          %img(src="https://images.pexels.com/photos/885880/pexels-photo-885880.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
        .card__content
          %h3 Lorem ipsum
          %p Class aptent taciti sociosqu ad litora torquent per conubia nostra
    .card.card--vertical
      .card__image
        %img(src="https://images.pexels.com/photos/450597/pexels-photo-450597.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
    .card
      .card__image
        %img(src="https://images.pexels.com/photos/269923/pexels-photo-269923.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
    .card
      .card__content
        %p <em>We wander for distraction, but we travel for fulfilment.</em>
        %p — Hilaire Belloc
    .card.card--2x
      .card__image
        %img(src="https://images.pexels.com/photos/247929/pexels-photo-247929.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
    .card.card--horizontal.card--frameless
      .card__content.big-script
        %p Bon voyage
    .card
      .card__image
        %img(src="https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?auto=compress&cs=tinysrgb&h=750&w=1260")
    .card.card--horizontal
      .card__image
        %img(src="https://images.pexels.com/photos/358319/pexels-photo-358319.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
    .card
      .card__image
        %img(src="https://images.pexels.com/photos/373912/pexels-photo-373912.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
    .card
      .card__content
        %p <em>A good traveller has no fixed plans and is not intent on arriving.</em>
        %p — Lao Tzu
    .card
      .card__image
        %img(src="https://images.pexels.com/photos/386007/pexels-photo-386007.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")

style.css

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Sacramento");
html {
  font-size: 14.5px;
}

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.45em;
  background-color: #f0f0f0;
  color: #404646;
}

* {
  box-sizing: border-box;
}

.main-container {
  margin: 1.6rem 0.8rem;
}

.grid-container {
  margin: auto;
  display: grid;
  grid-gap: 1.1312rem;
  grid-template-columns: repeat(auto-fit, 12.8rem);
  grid-auto-rows: 12.8rem;
  grid-auto-flow: dense;
  justify-content: center;
  max-width: 75em;
}

.card {
  grid-row: auto / span 1;
  grid-column: auto / span 1;
  background-color: white;
  box-shadow: 1px 3px 3px rgba(0, 10, 20, 0.06);
}
.card h1, .card h2, .card h3, .card h4, .card p {
  margin-top: 0;
  font-weight: normal;
}
.card__image {
  height: 100%;
  max-height: 100%;
  width: 100%;
  display: flex;
}
.card__image img {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.card__side-by-side {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}
.card__side-by-side--m {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.card__side-by-side--m img {
  min-height: auto;
}
.card__content {
  padding: 1.6rem;
}
.card__button {
  margin: 1.6rem 0;
  text-align: center;
  padding: 0.8rem 1.6rem;
  background: none;
  border: 0.5px solid #777;
  border-radius: 2px;
}
.card__button:hover {
  border-color: #d099a0;
}
.card--featured {
  grid-row: auto / span 3;
  grid-column: auto / span 2;
}
.card--2x {
  grid-row: auto / span 2;
  grid-column: auto / span 2;
}
.card--vertical {
  grid-row: auto / span 2;
}
.card--horizontal {
  grid-column: auto / span 2;
}
.card--frameless {
  background-color: transparent;
  box-shadow: none;
}

.padding-large {
  padding: 3.2rem;
}
.padding-large--l {
  padding: 1.6rem;
}

.big-script {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  font-family: 'Sacramento', sans-serif;
  font-size: 4.3em;
  line-height: 1.15em;
  text-align: center;
}
.big-script p {
  margin: 0;
}

@media (min-width: 627px) {
  .grid-container {
    grid-gap: 1.6rem;
  }

  .card__side-by-side--m {
    flex-flow: row nowrap;
  }
  .card__side-by-side--m img {
    min-height: 100%;
  }
  .card--featured {
    grid-row: auto / span 2;
    grid-column: 1 / -1;
  }
}
@media (min-width: 836px) {
  .padding-large--l {
    padding: 3.2rem;
  }
}

style.scss

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Sacramento');

$spacing-medium: 1.6rem;
$spacing-small: $spacing-medium*0.5;
$spacing-smedium: $spacing-medium*0.707;
$spacing-large: $spacing-medium*2;
$spacing-xlarge: $spacing-medium*4;
$spacing-xxlarge: $spacing-medium*8;
$box-size: $spacing-xxlarge;

$color-text: #404646;

html {
  font-size: 14.5px;
}

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.45em;
  background-color: #f0f0f0;
  color: $color-text;
}

* {
  box-sizing: border-box;
}

.main-container {
  margin: $spacing-medium $spacing-small;
}

.grid-container {
  margin: auto;
  display: grid;
  grid-gap: $spacing-smedium;
  grid-template-columns: repeat(auto-fit, $box-size);
  grid-auto-rows: $box-size;
  grid-auto-flow: dense;
  justify-content: center;
  max-width: 75em;
}

.card {
  grid-row: auto / span 1;
  grid-column: auto / span 1;
  background-color: white;
  box-shadow: 1px 3px 3px rgba(0, 10, 20, 0.06);
  h1, h2, h3, h4, p {
    margin-top: 0;
    font-weight: normal;
  }
  &__image {
    height: 100%;
    max-height: 100%;
    width: 100%;
    display: flex;
    img {
      height: 100%;
      min-height: 100%;
      max-height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
  &__side-by-side {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    &--m {
      height: 100%;
      width: 100%;
      display: flex;
      flex-flow: column nowrap;
      img {
        min-height: auto;
      }
    }
  }
  &__content {
    padding: $spacing-medium;
  }
  &__button {
    margin: $spacing-medium 0;
    text-align: center;
    padding: $spacing-small $spacing-medium;
    background: none;
    border: 0.5px solid #777;
    border-radius: 2px;
    &:hover {
      border-color: #d099a0;
    }
  }
  &--featured {
    grid-row: auto / span 3;
    grid-column: auto / span 2;
  }
  &--2x {
    grid-row: auto / span 2;
    grid-column: auto / span 2;
  }
  &--vertical {
    grid-row: auto / span 2;
  }
  &--horizontal {
    grid-column: auto / span 2;
  }
  &--frameless {
    background-color: transparent;
    box-shadow: none;
  }
}

.padding {
  &-large {
    padding: $spacing-large;
    &--l {
      padding: $spacing-medium;
    }
  }
}

.big-script {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  font-family: 'Sacramento', sans-serif;
  font-size: 4.3em;
  line-height: 1.15em;
  text-align: center;
  p {
    margin: 0;
  }
}

@media (min-width: 627px) {
  .grid-container {
    grid-gap: $spacing-medium;
  }
  .card {
    &__side-by-side--m {
      flex-flow: row nowrap;
      img {
        min-height: 100%;
      }
    }
    &--featured {
      grid-row: auto / span 2;
      grid-column: 1 / -1;
    }
  }
}

@media (min-width: 836px) {
  .padding-large--l {
    padding: $spacing-large;
  }
}