.viewport {
  height: 600px;
  mask-image: linear-gradient(180deg, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent);
  overflow: hidden
}

.gallery {
  column-count: 2;
  orphans: 1;
  widows: 1;

  /* can we do not hard coded figures but every element like p or a ? */
  figure {
    /* display: inline-block because or else the figure won't hold
        together in columns (orphans) */
    display: inline-block;
    margin: $article-gutter 0;
    width: 100%;

    &.promise {
      background: $primary-color;
      border-radius: 1.5rem;
      font-size: 24px;
      color: white;
      padding: 1rem      
    }
  }

  figcaption {
	  padding-left: 0;
    text-align: center
  }	
}

@media (min-width: 640px) {
  .gallery {
    column-count: 4
  }
}