$karl-card-gutter-width: 6%;
$karl-card-column-width: 20%;
$karl-card-layout: (
  columns: 4,
  container: 100%,
  gutter-position: after,
  gutters: $karl-card-gutter-width/$karl-card-column-width
);

.karl-CardGrid {
  box-sizing: border-box;
  width: 100%;
  clear: both;

  @include k-media-xs {
    flex-direction: column;
  }
}

.karl-Card {
  box-sizing: border-box;
  margin: .6rem 0 2.5rem 0;

  border: 1px solid map-get($k-colors, 'line-1');
  background-color: white;

  &:last-child {
    margin-right: 0;
  }

  @include with-layout($karl-card-layout) {
    @include span(1);

    @include k-media-xs {
      @include span(4);
    }
  }
}

.karl-ProjectCard {
  border: 1px solid map-get($k-colors, 'line-1');
  height: k-px-to-rem(100px);
  background-color: map-get($k-colors, 'background-1');
  box-shadow: 0 5px 10px map-get($k-colors, 'line-2');
}

.karl-Icons, {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: k-px-to-rem(20px);
  height: k-px-to-rem(100px);

  background-color: map-get($k-colors, 'background-1');
  border-radius: k-px-to-rem(8px);
}

.karl-Icons__card {
  margin: 0 auto;
  border-radius: k-px-to-rem(50px);
  border: k-px-to-rem(1px) solid transparent;
}