@media (max-width: 767px) { html, body { max-width: 100%; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { max-width: 100%; overflow-wrap: anywhere; word-break: normal; hyphens: auto; } } .scroll-fade { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; will-change: opacity, transform; } .scroll-fade.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .scroll-fade { opacity: 1; transform: none; transition: none; } }  .col-span-12 { --col-span: 12; }  @media (min-width: 768px) { .md-col-span-6 { --col-span: 6; } .md-col-span-4 { --col-span: 4; } .md-col-span-8 { --col-span: 8; } }  @media (min-width: 992px) { .lg-col-span-3 { --col-span: 3; } .lg-col-span-4 { --col-span: 4; } .lg-col-span-6 { --col-span: 6; } .lg-col-span-8 { --col-span: 8; } }