From f5250af8edec2d67c60475838065c8d6768bbbf1 Mon Sep 17 00:00:00 2001
From: Dan Lebo <dan.lebo@me.com>
Date: Wed, 15 Feb 2023 15:55:29 -0800
Subject: [PATCH] mobile fixes for marquee

---
 beta/src/components/Layout/HomeContent.js |  4 +++-
 beta/tailwind.config.js                   | 18 +++++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/beta/src/components/Layout/HomeContent.js b/beta/src/components/Layout/HomeContent.js
index 21a767a70..315d7df79 100644
--- a/beta/src/components/Layout/HomeContent.js
+++ b/beta/src/components/Layout/HomeContent.js
@@ -445,7 +445,9 @@ function CommunityImages() {
   return (
     <>
       {images.map((src, i) => (
-        <div key={i} className="flex justify-center px-2.5 lg:px-5 min-w-[25%]">
+        <div
+          key={i}
+          className="flex justify-center px-2.5 lg:px-5 min-w-[50%] lg:min-w-[25%]">
           <img
             src={src}
             className={cn(
diff --git a/beta/tailwind.config.js b/beta/tailwind.config.js
index 69182a674..ae30636d2 100644
--- a/beta/tailwind.config.js
+++ b/beta/tailwind.config.js
@@ -74,10 +74,10 @@ module.exports = {
         code: 'calc(1em - 20%)',
       },
       animation: {
-        marquee: 'marquee 60s linear infinite',
-        marquee2: 'marquee2 60s linear infinite',
-        'large-marquee': 'marquee 120s linear infinite',
-        'large-marquee2': 'marquee2 120s linear infinite',
+        marquee: 'marquee 40s linear infinite',
+        marquee2: 'marquee2 40s linear infinite',
+        'large-marquee': 'large-marquee 80s linear infinite',
+        'large-marquee2': 'large-marquee2 80s linear infinite',
       },
       keyframes: {
         shimmer: {
@@ -97,9 +97,17 @@ module.exports = {
         },
         marquee: {
           '0%': {transform: 'translateX(0%)'},
-          '100%': {transform: 'translateX(-200%)'},
+          '100%': {transform: 'translateX(-400%)'},
         },
         marquee2: {
+          '0%': {transform: 'translateX(400%)'},
+          '100%': {transform: 'translateX(0%)'},
+        },
+        'large-marquee': {
+          '0%': {transform: 'translateX(0%)'},
+          '100%': {transform: 'translateX(-200%)'},
+        },
+        'large-marquee2': {
           '0%': {transform: 'translateX(200%)'},
           '100%': {transform: 'translateX(0%)'},
         },