标题文本被 max-wdith 截断

Question

我试图使标题和副标题文本更大，但它被最大宽度截断了。我正在使用 tailwind-css。

我已经尝试为 max-w 属性添加更大的值，并且还尝试提供一些 div 填充，但它仍然被切断。我希望文本足够大以填充屏幕的 50%

谢谢！

import Card from "@/components/home/card";
import Layout from "@/components/layout";
import Balancer from "react-wrap-balancer";
import { motion } from "framer-motion";
import { DEPLOY_URL, FADE_DOWN_ANIMATION_VARIANTS } from "@/lib/constants";
import { Github, Twitter, Instagram } from "@/components/shared/icons";
import WebVitals from "@/components/home/web-vitals";
import ComponentGrid from "@/components/home/component-grid";
import Image from "next/image";

export default function Home() {
  return (
    <Layout>
      <div className="flex flex-col items-center justify-center w-11/12 h-screen bg-[#962845] mt-[-50px]">
        <div className="mt-[-250px]">
            <motion.div
              className="max-w-xl px-9 xl:px-0"
              initial="hidden"
              whileInView="show"
              animate="show"
              viewport={{ once: true }}
              variants={{
                hidden: {},
                show: {
                  transition: {
                    staggerChildren: 0.15,
                  },
                },
              }}
            >
              
              <motion.a
                variants={FADE_DOWN_ANIMATION_VARIANTS}
                href="https://www.instagram.com/macblockchain/"
                target="_blank"
                rel="noreferrer"
                className="mx-auto mb-5 flex max-w-fit items-center justify-center space-x-2 overflow-hidden rounded-full bg-pink-100 px-7 py-2 transition-colors hover:bg-pink-200"
              >
                <Instagram className="h-5 w-5 text-[#BE185D]" />
                <p className="text-sm font-semibold text-[#BE185D]">
                  @macblockchain
                </p>
              </motion.a>
              <motion.h1
                className="bg-gradient-to-br from-black to-stone-700 bg-clip-text text-center font-display text-4xl font-bold tracking-[-0.02em] text-transparent drop-shadow-sm md:text-8xl md:leading-[5rem]"
                variants={FADE_DOWN_ANIMATION_VARIANTS}
              >
                <Balancer>McMaster Blockchain Club</Balancer>
              </motion.h1>
              <motion.p
                className="mt-6 text-center text-white md:text-xl"
                variants={FADE_DOWN_ANIMATION_VARIANTS}
              >
                <Balancer>
                  Building the Future of Blockchain at McMaster University.
                </Balancer>
              </motion.p>
              <motion.div
                className="mx-auto mt-6 flex items-center justify-center space-x-5"
                variants={FADE_DOWN_ANIMATION_VARIANTS}
              >
              </motion.div>
            </motion.div>
        </div>
      
      </div>

    </Layout>
  );
}

我已经尝试为 max-w 属性添加更大的值，并且还尝试提供一些 div 填充，但它仍然被切断。我希望文本足够大以填充 50%，文本适合 7xl 但 8xl 使其截断