web/src/app/blog/styles.module.css

.blogContent {
  @apply prose prose-xl prose-pink max-w-none;
}

.blogContent p {
  @apply text-xl leading-relaxed mb-8 text-gray-700;
}

@media (max-width: 640px) {
  .blogContent p {
    @apply text-lg leading-relaxed;
  }
}

.blogContent h2 {
  @apply text-4xl font-bold mt-20 mb-8 text-gray-900;
}

.blogContent h3 {
  @apply text-3xl font-semibold mt-16 mb-6 text-gray-900;
}

.blogContent a {
  @apply text-[#DB2777] underline decoration-[#DB2777]/30 underline-offset-2 hover:decoration-[#DB2777] transition-colors;
}

.blogContent ul,
.blogContent ol {
  @apply my-8 pl-6 space-y-3 text-gray-700 text-xl;
}

@media (max-width: 640px) {
  .blogContent ul,
  .blogContent ol {
    @apply text-lg;
  }
}

.blogContent li {
  @apply text-gray-700 leading-relaxed;
}

.blogContent img {
  @apply rounded-xl my-12 shadow-md mx-auto;
}

.blogContent figure {
  @apply my-16;
}

.blogContent figcaption {
  @apply mt-4 text-sm text-gray-500 italic text-center max-w-2xl mx-auto;
}

.blogContent blockquote {
  @apply italic border-l-4 border-[#DB2777] pl-8 my-16 text-gray-600 bg-pink-50/50 py-6 pr-6 rounded-r-lg text-xl;
}

@media (max-width: 640px) {
  .blogContent blockquote {
    @apply text-lg py-4 pr-4;
  }
}

.blogContent pre {
  @apply my-12 rounded-xl shadow-md bg-gray-900 overflow-x-auto;
}

.blogContent code {
  @apply text-[#DB2777] bg-pink-50 px-2 py-0.5 rounded-md text-base font-normal;
}

.blogContent pre code {
  @apply bg-transparent text-inherit p-0 text-base text-gray-200;
}

.blogContent strong {
  @apply text-gray-900 font-semibold;
}

.blogContent em {
  @apply text-gray-700;
}

.blogContent hr {
  @apply my-16 border-gray-200;
}

.blogContent table {
  @apply my-8 w-full border-collapse;
}

.blogContent th {
  @apply bg-gray-50 text-left py-3 px-4 font-semibold text-gray-900 border-b border-gray-200;
}

.blogContent td {
  @apply py-3 px-4 border-b border-gray-200 text-gray-700;
}

.blogContent iframe {
  @apply my-12 rounded-xl shadow-md mx-auto w-full aspect-video;
}