/* Content
   ========================================================================== */

$headings: (
        1: 32,
        2: 24,
        3: 16,
        4: 12
);

.c-content {
  @each $size-outer, $margin-outer in $headings {
    h#{$size-outer} {
      @apply text-grey-900;
      @each $size-inner, $margin-inner in $headings {
        ~ h#{$size-inner} {
          @apply mt-#{$margin-inner};
        }
      }
    }
  }

  h1 {
    @apply mb-8;
  }

  h2 {
    @apply mb-4;
  }

  h3, h4 {
    @apply mb-2;
  }

  p, ul, blockquote {
    @apply font-light text-base leading-normal antialiased;

    @screen lg {
      @apply leading-relaxed;
    }

    + p {
      @apply mt-8;
    }

    + blockquote {
      @apply mt-8;
    }
  }

  p, ul {
    @apply text-grey-600 font-body;
  }

  a {
    @extend .c-underline;
    @apply text-red-800;
  }

  ul {
    @apply list-disc pl-12;

    + ul {
      @apply mt-8;
    }
  }

  blockquote {
    @apply border-l-3 border-red-500 py-2 px-4;

    p {
      @apply font-quote text-grey-900;
    }
  }
}

.c-content--large {
  p, ul {
    @apply text-lg;
  }
}

.c-content--footer {
  p, ul {
    @apply text-grey-300;
  }
}

.c-content--quote {
  p {
    @apply font-quote text-grey-900;
  }
}