style: use built-in Tailwind css breakpoints

frontend/app/components/Footer/Footer.tsx

@@ -4,7 +4,7 @@ import { buttonVariants } from "~/components/ui/Button";
 function Footer() {
   return (
     <footer className="border-t-2 border-zinc-800 bg-background text-sm text-muted-foreground">
-      <div className="mx-auto flex max-w-300 flex-wrap items-center justify-between gap-x-6 gap-y-8 px-10 py-12 max-[800px]:flex-col max-[800px]:text-center">
+      <div className="mx-auto flex flex-col text-center max-w-300 flex-wrap items-center gap-x-6 gap-y-8 px-10 py-12 md:flex-row md:justify-between md:text-left">
         <p className="flex flex-col gap-1">
           <Link to="/" className="text-2xl text-foreground">
             Readr

frontend/app/components/books/SearchBar/SearchBar.tsx

@@ -66,7 +66,7 @@ function SearchBar({ resultCount }: SearchBarProps) {
   const filtersDescription = `${filtersCount} ${filtersCount === 1 ? "filter" : "filters"} active`;
 
   return (
-    <section className="flex items-center justify-center gap-4 mx-auto mt-20 w-full max-[1000px]:mx-10 max-[600px]:mt-10 max-[1000px]:w-[calc(100%-80px)]">
+    <section className="flex items-center justify-center gap-4 mx-auto mt-10 w-full px-10 sm:mt-20">
       <InputGroup className="h-10 max-w-150 bg-card">
         <InputGroupAddon align="inline-start">
           <SearchIcon />
@@ -85,7 +85,7 @@ function SearchBar({ resultCount }: SearchBarProps) {
         />
 
         {resultCount !== undefined && (
-          <InputGroupAddon align="inline-end" className="max-[400px]:hidden">
+          <InputGroupAddon align="inline-end" className="max-sm:hidden">
             <InputGroupText aria-live="polite">
               {resultCount} {resultCount === 1 ? "result" : "results"}
             </InputGroupText>

frontend/app/components/home/ForYouSection/ForYouSection.tsx

@@ -11,7 +11,7 @@ import { HOME_MIN_RATINGS } from "~/lib/constants";
 
 const RECOMMENDATION_LIMIT = 4;
 const BOOK_GRID =
-  "grid grid-cols-4 gap-4 max-[1200px]:grid-cols-3 max-[1000px]:grid-cols-2 max-[600px]:grid-cols-1";
+  "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4";
 
 function ForYouSection() {
   const favorites = useFavoriteBooks({ page: 1 });

frontend/app/components/home/HowItWorksSection/HowItWorksSection.tsx

@@ -32,7 +32,7 @@ function HowItWorksSection() {
         How Readr works
       </h2>
 
-      <ol className="grid grid-cols-3 gap-4 max-[900px]:grid-cols-1">
+      <ol className="grid grid-cols-1 gap-4 lg:grid-cols-3">
         {STEPS.map(({ icon: Icon, title, description }) => (
           <li key={title}>
             <Card className="h-full p-6 transition-all duration-200 hover:shadow-xl motion-safe:hover:-translate-y-0.5">

frontend/app/components/home/StatsSection/StatsSection.tsx

@@ -39,7 +39,7 @@ function StatsSection({ bookCount }: StatsSectionProps) {
     >
       <dl
         ref={ref}
-        className="grid grid-cols-3 gap-6 rounded-xl bg-card py-8 ring-1 ring-foreground/10 max-[600px]:grid-cols-1"
+        className="grid grid-cols-1 gap-6 rounded-xl bg-card py-8 ring-1 ring-foreground/10 sm:grid-cols-3"
       >
         <Stat label="Books" value={bookCount} start={inView} />
         <Stat label="Genres" value={genres.length} start={inView} />

frontend/app/components/home/TopRatedSection/TopRatedSection.tsx

@@ -43,7 +43,7 @@ function TopRatedSection({
       {loading || hasBooks ? (
         <ul
           aria-label={loading ? "Loading top rated books" : undefined}
-          className="grid grid-cols-4 gap-4 max-[1200px]:grid-cols-3 max-[1000px]:grid-cols-2 max-[600px]:grid-cols-1"
+          className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
         >
           {hasBooks
             ? books.map((book) => (

frontend/app/routes/book/selectedBook.tsx

@@ -144,8 +144,8 @@ export default function SelectedBookPage({ params }: Route.ComponentProps) {
           Go back
         </Button>
 
-        <section className="grid grid-cols-1 gap-2 min-[901px]:grid-cols-[2fr_3fr]">
-          <Card className="relative min-h-96 h-full items-center justify-center p-7.5 min-[901px]:sticky min-[901px]:top-4 min-[901px]:self-start max-[1000px]:min-[901px]:p-3.75 [&>figure]:w-76 [&>figure]:max-w-full [&>p]:w-80 [&>p]:max-w-full">
+        <section className="grid grid-cols-1 gap-2 lg:grid-cols-[2fr_3fr]">
+          <Card className="relative min-h-96 h-full items-center justify-center p-7.5 lg:sticky lg:top-4 lg:self-start [&>figure]:w-76 [&>figure]:max-w-full [&>p]:w-80 [&>p]:max-w-full">
             <FavoriteButton book={book} />
             <BookCover book={book} loading="eager" />
             <BookRating rating={book.rating} numRatings={book.numRatings} />

frontend/app/routes/books.tsx

@@ -23,7 +23,7 @@ function BookList({
   searchListParams?: string;
 }) {
   return (
-    <ul className="grid grid-cols-4 justify-center gap-4 mx-auto px-10 pb-10 pt-4 max-w-300 max-[1200px]:grid-cols-3 max-[1000px]:grid-cols-2 max-[600px]:grid-cols-1">
+    <ul className="grid grid-cols-1 justify-center gap-4 mx-auto px-10 pb-10 pt-4 max-w-300 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
       {books.map((book) => (
         <li key={book.id}>
           <BookCard book={book} searchListParams={searchListParams} />