css – Header message obtaining cutoff by max-wdith

I am attempting to make the title as well as sub-title message larger, however it’s obtaining cuttoff by a max-width. I am making use of tailwind-css.

I have actually attempted including bigger worth to the max-w residential property, as well as additionally attempted providing some divs extra padding however it still obtains removed. I desire the message to be large sufficient to fill up 50% the display

Many Thanks!

 import Card from "@/ components/home/card";.
import Format from "@/ components/layout";.
import Balancer from "react-wrap-balancer";.
import {activity} 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 Photo from "next/image";.

export default feature House() {
return (.
<< Format>>.
<< 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".
preliminary=" concealed"
whileInView=" program"
animate=" program"
viewport= {{as soon as: real}}
variations= {{
concealed: {},.
program: {
change: {
staggerChildren: 0.15,.
},.
},.
}}
>>.

<< motion.a.
variations= {FADE_DOWN_ANIMATION_VARIANTS}
href=" https://www.instagram.com/macblockchain/"
target=" _ space"
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 float: bg-pink-200".
>>.
<< Instagram className=" h-5 w-5 message-[#BE185D]"/>>.
<< p className=" text-sm font-semibold message-[#BE185D]">>.
@macblockchain.
<.
<.
<< motion.h1.
className=" bg-gradient-to-br from-black to-stone-700 bg-clip-text text-center font-display text-4xl font-bold monitoring-[-0.02em] text-transparent drop-shadow-sm md: text-8xl md: leading-[5rem]".
variations= {FADE_DOWN_ANIMATION_VARIANTS}
>>.
<< Balancer>> McMaster Blockchain Club<.
<.
<< motion.p.
className=" mt-6 text-center text-white md: text-xl".
variations= {FADE_DOWN_ANIMATION_VARIANTS}
>>.
<< Balancer>>.
Constructing the Future of Blockchain at McMaster College.
<.
<.
<< motion.div.
className=" mx-auto mt-6 flex items-center justify-center space-x-5".
variations= {FADE_DOWN_ANIMATION_VARIANTS}
>>.
<.
<.
<.

<.

<.
);.
}

I have actually attempted including bigger worth to the max-w residential property, as well as additionally attempted providing some divs extra padding however it still obtains removed. I desire the message to be large sufficient to fill up 50%, the message fits with 7xl however 8xl makes it cutoff