.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")

@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 (max-width: 413px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .card {
    min-height: $box-size;
  }
}

@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;
  }
}