Asymmetric Editorial Bento Grid

// An editorial bento: uneven columns and a tall lead story, set with grid-template-areas.
// Below 768px it becomes one column in reading order.
const stories = [
  { area: "lead", kicker: "Cover story", title: "The plot that feeds a street", body: "Twelve neighbours, one abandoned tennis court and a rota that has kept forty households in greens since spring.", by: "Words by Ines Maret", tone: "bg-[#2f4a3a] text-[#f4efe4]" },
  { area: "seeds", kicker: "Field notes", title: "Saving seed from this year's beans", body: "Leave the best pods on the plant until they rattle.", by: "Tom Achebe", tone: "bg-[#e7d9bf] text-stone-900" },
  { area: "frost", kicker: "Calendar", title: "First frost: 14 November", body: "Fleece the chard and bring in the last squash.", by: "Almanac", tone: "bg-white text-stone-900" },
  { area: "tool", kicker: "Workshop", title: "Mending a hoe with an ash handle", body: "A bench, a spokeshave and an afternoon is all it takes to give a cracked tool another twenty years.", by: "Petra Lind", tone: "bg-[#c4552f] text-white" },
  { area: "letters", kicker: "Letters", title: "Slugs, again", body: "Readers write in with what finally worked.", by: "Your post", tone: "bg-white text-stone-900" },
];

export default function AsymmetricEditorialBentoGridOneColumnOnPhones() {
  return (
    <section className="bed bg-[#f4efe4] px-5 py-16 sm:py-24">
      <style>{`
        .bed-grid { display: grid; gap: 14px; grid-template-columns: 1fr; grid-template-areas: "lead" "seeds" "frost" "tool" "letters"; }
        @media (min-width: 768px) {
          .bed-grid { grid-template-columns: 5fr 3fr 4fr; grid-template-rows: auto auto auto; grid-template-areas: "lead seeds frost" "lead tool tool" "lead letters letters"; }
        }
      `}</style>
      <div className="mx-auto max-w-6xl">
        <div className="flex items-end justify-between border-b border-stone-900 pb-4">
          <h2 className="font-serif text-3xl tracking-tight text-stone-900 sm:text-5xl">The Allotment Quarterly</h2>
          <p className="hidden font-serif text-sm italic text-stone-700 sm:block">Issue 19, Autumn</p>
        </div>
        <div className="bed-grid mt-8">
          {stories.map((s) => (
            <article key={s.area} style={{ gridArea: s.area }} className={`flex flex-col rounded-sm p-6 ${s.tone} ${s.area === "lead" ? "md:min-h-[520px] md:p-8" : ""}`}>
              <p className="text-xs font-semibold uppercase tracking-[0.18em] opacity-80">{s.kicker}</p>
              <h3 className={`mt-3 font-serif leading-tight ${s.area === "lead" ? "text-4xl md:mt-auto md:text-5xl" : "text-2xl"}`}>
                <a href="#" className="rounded-sm hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-2 focus-visible:ring-offset-transparent">{s.title}</a>
              </h3>
              <p className={`mt-3 leading-relaxed opacity-90 ${s.area === "lead" ? "text-lg" : "text-[15px]"}`}>{s.body}</p>
              <p className="mt-4 font-serif text-sm italic opacity-80">{s.by}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}