Cards

.l-cards {
  display: flex;
  -webkit-overflow-scrolling: touch; // Required for mobile safari and scroll-snap
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 $gridspacing;
  padding: $gridspacing $gridspacing ($gridspacing * 3);
  will-change: transform; // Forces layer, optimizes scroll

  // This selects the first child of l-cards which is app-card.
  > * {
    // display: flex;

    &:not(:last-child) {

        margin-right: $gridspacing;

    }

    // Solves the padding-right problem,
    // https://blog.alexandergottlieb.com/overflow-scroll-and-the-right-padding-problem-a-css-only-solution-6d442915b3f4
    &:last-child {

      :after {
        content: '';
        position: absolute;
        display: block;
        width: 1px;
        height: 1px;
        top: 0;
        right: -8px;
      }
    }
  }

  a {
    position: relative;
    scroll-snap-align: start;
  }
}