From 281c3d3ba48741aa76258660b731c6084822e2a3 Mon Sep 17 00:00:00 2001
From: ubcma <indira.sowy@gmail.com>
Date: Sun, 17 Nov 2024 21:42:39 -0800
Subject: [PATCH] add hover desc

---
 src/sections/Workshops.jsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/sections/Workshops.jsx b/src/sections/Workshops.jsx
index eb71d57d..47cc8ef8 100644
--- a/src/sections/Workshops.jsx
+++ b/src/sections/Workshops.jsx
@@ -25,7 +25,7 @@ const WorkshopsContainer = styled.div`
   position: absolute;
   bottom: 0;
   width: 100%;
-  height: calc(100vw * (650 / 1280));
+  height: calc(100vw * (670 / 1280));
 
   ${p => p.theme.mediaQueries.tablet} {
     position: relative;
@@ -55,7 +55,7 @@ const Nugget = styled.img`
 
 const Schedule = styled.div`
   position: absolute;
-  margin-top: calc(100vw * (32 / 1280));
+  margin-top: calc(100vw * (24 / 1280));
   margin-right: calc(100vw * (128 / 1280));
   z-index: 1;
   background-image: url('./assets/images/schedule.svg');
@@ -186,14 +186,18 @@ const Description = styled.p`
 const SubDescription = styled.p`
   font-weight: 600;
   font-family: 'HK Grotesk Medium';
-  font-size: calc(100vw * (20 / 487));
+  font-size: calc(100vw * (18 / 1280));
   text-align: center;
   color: #51483e;
-  margin-top: calc(100vw * (22 / 487));
+
+  ${p => p.theme.mediaQueries.mobile} {
+    font-size: calc(100vw * (20 / 487));
+    margin-top: calc(100vw * (22 / 487));
+  }
 `
 
 const Squares = styled.div`
-  margin-top: calc(100vw * (32 / 1280));
+  margin-top: calc(100vw * (24 / 1280));
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 
@@ -320,6 +324,7 @@ const Workshops = () => {
   return (
     <WorkshopsContainer id="workshops">
       <Header>WORKSHOPS</Header>
+      {!isMobile && (<SubDescription>Hover on a workshop tile to learn more!</SubDescription>)}
       <Grid>
         <Text>
           <Title>Discover New Skills</Title>