FAQ Accordion using Next.js and Tailwind

I'm stuck on these two things:

1. How do I stretch the background image to full width but not full height like in the design? This is the jsx for the page that contains the FAQAccordion component (full code here):

<main
  className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-faqLightPink"
  style={{
      backgroundImage: `url(${backgroundImage.src})`,
      backgroundRepeat: "no-repeat",
      backgroundSize: "auto",
  }}
>
  <FAQAccordion />
</main>

2. Using Tailwind how do I make nice transitions when the answers open and close? I tried adding transition-all duration-300 to the <p> elements that contain the answers but it doesn't work:

<p className={`mt-6 text-faqGrayishPurple transition-all duration-300 ${activeIndex === idx ? "block" : "hidden"}`}>
  {answer}
</p>

Edit: I managed to fix both problems. The transitions one was tricky: I ended up animating the max-height property from 0 to element.scrollHeight, instead of trying to transition from "display: none" to "display: block".