main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    @apply !leading-tight md:!leading-tight;
    @apply font-heading font-bold;
    @apply mb-4 last:mb-0;
    @apply text-2xl md:text-3xl;
    @apply text-gray-800;
  }

  h1,
  .h1 {
    @apply text-[30px] 2xs:text-[36px] xs:text-[48px] md:text-[64px];
    @apply mb-8 last:mb-0 md:mb-12;
  }

  h2,
  .h2 {
    @apply text-[30px] xs:text-[36px] md:text-[48px];
    @apply mb-6 last:mb-0;
  }

  h3,
  .h3 {
    @apply text-[20px] xs:text-[24px] md:text-[30px];
    @apply mb-6 last:mb-0;
  }

  p,
  ul,
  blockquote {
    @apply text-base !leading-1.75 md:text-lg;
  }

  a {
    @apply cursor-pointer transition-colors duration-200;
  }

  strong {
    @apply text-gray-800;
  }

  .content p {
    @apply mb-8 last:mb-0;
  }

  .content ul {
    @apply mb-8 last:mb-0;
  }

  .content a {
    @apply font-semibold text-emerald-400 underline underline-offset-4 hover:text-emerald-500;
  }
}

@layer utilities {
  .center {
    @apply flex items-center justify-center;
  }

  .my-section {
    @apply my-16 md:my-24;
  }

  .mt-section {
    @apply mt-16 md:mt-24;
  }

  .mb-section {
    @apply mb-16 md:mb-24;
  }
}