/* Add custom CSS styles below */ 
 body { font-size: 1.2rem; }

a { font-size: 1rem; }

/* BOOKING CARD DATE AND SLOTS */
.list.list--horizontal {
  display: none !important;
}
.list.list--horizontal .sicon-time,
.list.list--horizontal .sicon-chair-theater {
  display: none !important;
}
.sicon-time,
.sicon-chair-theater {
  display: none !important;
}

/* HERO PRODUCT PACKAGES */

/* HEADER and DESCRIPTION */
h2[data-swiper-parallax="-500"].leading-tight {
  font-size: 3rem !important; /* mobile default, ~28px */
  line-height: 1.3 !important;
  padding-top: 2rem; 
  text-align: center;
}



h2[data-swiper-parallax="-500"] font[dir="auto"] {
  font-size: inherit !important;
}

/* Hero Paragraph */
p.text-sm.mb-8.line-clamp-2.max-w-lg {
  max-width: 100% !important;
  text-align: center;
  font-size: 18px !important;
  line-height: 1.6 !important;
  -webkit-line-clamp: 4 !important; /* increase visible lines, since bigger text = less fits in 2 lines */
}

/* HERO PRODUCT CARD */
.s-slider-block__title{
  /* display: none; */
}

/* CHECK CHECK */
/* CHECK CHECK */
/* THIS TRIGGERS GLOBALLY ON WEBSITE */
.s-slider-swiper-wrapper {
  /* margin-top: 3rem; */
  /* justify-content: center !important;
   gap: 0.5rem !important; */
}



/* THIS TRIGGERS GLOBALLY ON WEBSITE */
/* CHECK CHECK */
/* CHECK CHECK */

/* PRODUCT CARD TEXT */
.s-product-card-content {
  /* justify-content: flex-start !important;
  align-items: flex-start !important; */
}
.s-product-card-content-title {
  font-size: 1.2rem !important;
}
.s-product-card-content-title a {
  font-size: 1.2rem !important;
}


/* MEDIA BREAK POINTS */
@media (max-width: 600px) {
    .swiper-slide.min-h-\[300px\] {
    height: auto !important;
  }

  .swiper-slide.min-h-\[300px\] .home-slider__content {
    height: auto !important;
    padding-top: 2rem !important;
    padding-bottom: 4rem !important;
  }

  .swiper-slide.min-h-\[300px\] .w-4\/6 {
    width: 90% !important;
  }
  
  /* SLIDERS (THIS ACTIVATES THE SLIDE) */
  .s-slider-swiper-wrapper {
  /* margin-top: 3rem; */
  /* justify-content: flex-start !important; */
   gap: .7rem !important;
}
  
}


@media (min-width: 765px) {
    .swiper-slide.min-h-\[300px\] {
    min-height: auto !important;
  }

  .swiper-slide.min-h-\[300px\] .home-slider__content {
    height: auto !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }


  
  h2[data-swiper-parallax="-500"].leading-tight {
    font-size: 4.5rem !important; /* desktop, ~48px */
    width: 100% !important;
  }
   .home-slider__content .md\:w-7\/12 {
    width: 80% !important;
  }
}

@media (min-width: 1024px) {
  .home-slider__content .lg\:w-5\/12 {
    width: 65% !important;
  }
}
Notes:

I scoped everything under .home-slider__content (the parent wrapper) so this only affects the hero banner text container, not any other element elsewhere that might share these same Tailwind width classes.
The \/ in the selector is required — CSS needs the / in class names like w-4/6 escaped with a backslash to be a valid selector.
Breakpoints match Tailwind's defaults: md = 768px, lg = 1024px (same as the lg:text-title-size heading from earlier, so everything should scale together consistently).
Adjust the percentages (90%, 80%, 65%) to taste — if you want it to essentially span the full container, you could set 100% at each breakpoint instead.
If the text inside now wraps awkwardly or the p tag's line-clamp-2 cuts it off differently at the new width, let me know and I can help balance that too.