// Breakpoints
// Important to include "Include Media" at this point
// Cause we set the map our Breakpoints to their map $breakpoints
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}

.section {
  background-image: linear-gradient(180deg, #fafafa, #f5f5f5);
}

header {
  text-transform: uppercase;
  letter-spacing: 0.25ex;
  font-weight: 500;
}

.colContent {
  font-size: 15px;
  @include spaceY(padding-top padding-bottom, 0.5);
  background-image: linear-gradient(180deg, #cfd8dc, #eceff1);
  border-radius: 5px;
  color: #263238;
  box-shadow: 0 1px 2px rgba(#111, 0.2);
  flex: 1 1 auto;

  &--white {
    background: #eceff1;
    box-shadow: 0 1px 3px rgba(#111, 0.2);
    padding: 0;
    overflow: hidden;
  }
}

.example {
  .col {
    display: flex;
    @include spaceY(margin-top, 1);
  }
}