@layer components {
  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    @apply font-brand;
  }

  .h1,
  h1 {
    font-size: 2.5rem;
    @apply font-bold leading-tight tracking-tight;
  }

  .h2,
  h2 {
    font-size: 2rem;
    @apply font-bold leading-tight;
  }

  .h3,
  h3 {
    font-size: 1.5rem;
    @apply font-bold leading-normal;
  }

  .h4,
  h4 {
    font-size: 1.125rem;
    @apply font-bold leading-normal;
  }

  .h5,
  h5 {
    @apply font-bold uppercase tracking-wide text-sm;
  }

  .link {
    @apply text-green-600 cursor-pointer;

    &:hover,
    &:focus {
      @apply text-green-700;
    }
  }

  .link-danger {
    @apply text-red-600;

    &:hover,
    &:focus {
      @apply text-red-700;
    }
  }

  .font-brand {
    font-family: "Epilogue", sans-serif;
  }
}