Lower the opacity to make text readable

Author: hasparus

src/app/conf/2025/components/get-your-ticket/index.tsx

@@ -1,7 +1,6 @@
 import { clsx } from "clsx"
 
 import { ImageLoaded } from "../image-loaded"
-import { RepeatingStripes } from "../repeating-stripes"
 
 import { TicketPeriods } from "./ticket-periods"
 
@@ -45,7 +44,7 @@ function Stripes() {
     <ImageLoaded
       role="presentation"
       image={blurBean}
-      className="pointer-events-none absolute inset-x-0 bottom-[-385px] top-[-203px] translate-y-12 opacity-0 transition duration-[400ms] ease-linear [mask-position:70%_60%] *:opacity-60 data-[loaded=true]:translate-y-0 data-[loaded=true]:opacity-100 max-3xl:[mask-size:220%] 3xl:[mask-position:70%_39%]"
+      className="pointer-events-none absolute inset-x-0 bottom-[-385px] top-[-203px] translate-y-12 opacity-0 transition duration-[400ms] ease-linear [mask-position:70%_60%] *:opacity-100 data-[loaded=true]:translate-y-0 data-[loaded=true]:opacity-100 max-3xl:[mask-size:220%] max-md:[mask-size:800%] md:*:opacity-30 lg:*:opacity-50 xl:*:opacity-60 3xl:[mask-position:70%_39%]"
       style={{
         maskImage: `url(${blurBean.src})`,
         WebkitMaskImage: `url(${blurBean.src})`,

src/app/conf/2025/components/get-your-ticket/ticket-period.tsx

@@ -18,7 +18,7 @@ export function TicketPeriod({
   return (
     <article
       className={clsx(
-        "@container/card flex flex-col border border-pri-lighter bg-pri-light/[0.24] backdrop-blur-md transition [&+&]:border-l-0",
+        "flex flex-col border border-pri-lighter bg-pri-light/[0.24] backdrop-blur-md transition @container/card max-md:[&+&]:border-t-0 md:[&+&]:border-l-0",
         disabled && "opacity-50",
       )}
     >
@@ -27,7 +27,7 @@ export function TicketPeriod({
       </header>
       <div className="flex h-full flex-col justify-end gap-6 p-6">
         <div className="flex items-end justify-between gap-2">
-          <span className="@[356px]:typography-h2 text-white typography-h3">
+          <span className="text-white typography-h3 @[356px]:typography-h2">
             {price}
           </span>
           {/* eslint-disable-next-line tailwindcss/no-custom-classname */}