formatting

src/components/HeroSection/HeroElements.jsx

@@ -9,22 +9,20 @@ export const HeroContainer = styled.div`
     position: static;
     z-index: 1;
     }
-`
+`;
 
-
-
-export const HeroContent = styled.div` 
-    z-index: 3; 
-    width: 100% ; 
+export const HeroContent = styled.div`
+    z-index: 3;
+    width: 100%;
     max-width: 1100px;
     position: static;
     padding: 8px 24px;
     margin: 80px 0px;
     display: flex;
     flex-direction: column;
-    align-items: center ; 
-`
-export const HeroH1 = styled.h1` 
+    align-items: center;
+`;
+export const HeroH1 = styled.h1`
     color: #fff;
     font-size: 48px;
     text-align: center;
@@ -36,17 +34,15 @@ export const HeroH1 = styled.h1`
     @media screen and (max-width: 480px) {
         font-size: 32px;
     }
+`;
 
-`
-
-export const HeroP = styled.p` 
+export const HeroP = styled.p`
     margin-top: 24px;
     color: #fff;
-    font-size: 24px ; 
-    text-align: center ; 
-    max-width: 600px ; 
+    font-size: 24px;
+    text-align: center;
+    max-width: 600px;
 
-    
     @media screen and (max-width: 768px) {
         font-size: 24px;
     }
@@ -54,15 +50,14 @@ export const HeroP = styled.p`
     @media screen and (max-width: 480px) {
         font-size: 18px;
     }
-`
+`;
 
 export const HeroBtnWrapper = styled.div`
-    margin-top: 32px ; 
+    margin-top: 32px;
     display: flex;
-    flex-direction: column ; 
-    align-items: center ; 
-`
-
+    flex-direction: column;
+    align-items: center;
+`;
 
 export const HeroRow = styled.div` 
     display: grid; 
@@ -73,8 +68,7 @@ export const HeroRow = styled.div`
     @media screen and (max-width: 768px){
         grid-template-areas: 'col2' 'col1';
     }
-`
-
+`;
 
 export const HeroNewsItem = styled.div`
     margin-left: 4px;
@@ -82,23 +76,22 @@ export const HeroNewsItem = styled.div`
     font-size: 16px;
     // line-height: 16px;
     margin-bottom: 16px;
-    display: flex;  
+    display: flex;
     justify-content: start;
-
-`
+`;
 export const HeroNewsItemDate = styled.div`
     width: 20%;
-    margin-right: 20px ; 
+    margin-right: 20px;
     @media screen and (max-width: 768px) {
         font-size: 12px;
     }
     @media screen and (max-width: 480px) {
         font-size: 12px;
     }
-`
+`;
 
 export const HeroNewsItemContent = styled.div`
-    width: 80%; 
+    width: 80%;
     color: #000000;
 
     @media screen and (max-width: 768px) {
@@ -108,49 +101,46 @@ export const HeroNewsItemContent = styled.div`
     @media screen and (max-width: 480px) {
         font-size: 12px;
     }
-`
+`;
 
-
-
-export const HeroColumn1 = styled.div` 
+export const HeroColumn1 = styled.div`
     margin-bottom: 15px;
     margin-left: 12px;
     margin-top: 60px;
     padding: 10px 15px;
     padding: 0 15px;
     grid-area: col1;
-    align-items:left;
+    align-items: left;
     display: flex;
-    flex-direction:column;
+    flex-direction: column;
     justify-content: space-between;
-`
+`;
 
-
-export const HeroColumn2 = styled.div` 
+export const HeroColumn2 = styled.div`
     margin-bottom: 15px;
     padding: 0 15px;
     grid-area: col2;
     display: flex;
-    align-items:center;
-    flex-direction:column;
-`
+    align-items: center;
+    flex-direction: column;
+`;
 
 export const TextWrapper = styled.div`
-    max-width: 540px ; 
+    max-width: 540px;
     padding-top: 0;
     padding-bottom: 0;
-`
-export const HeroImgWrap = styled.div` 
+`;
+export const HeroImgWrap = styled.div`
     max-width: 555px;
     height: 100%;
-`
+`;
 
 export const Img = styled.img`
-  width: 100%;
-  margin-top: 0;
-  margin-right: 0;
-  margin-left: 10px;
-  padding-right: 0;
+    width: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 10px;
+    padding-right: 0;
 `;
 
 export const HeroDownloadsImg = styled.img`
@@ -159,34 +149,36 @@ export const HeroDownloadsImg = styled.img`
     margin-left: 0;
     padding-right: 0;
     margin-bottom: 10px;
-`
+`;
 
 export const HeroLink = styled.a`
-  color: #fff;
-  text-decoration: none;
-  padding: 0.6rem 0rem 0rem 0rem;
-  cursor: pointer;
-  position:relative ; 
+    color: #fff;
+    text-decoration: none;
+    padding: 0.6rem 0rem 0rem 0rem;
+    cursor: pointer;
+    position: relative;
 
-  &:before{
-    position: absolute;
-    margin: 0 auto;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background-color: #fff;
-    content: '';
-    opacity: .3;
-    -webkit-transform: scaleX(1);
-    transition-property: opacity, -webkit-transform;
-    transition-duration: .3s;
-}
+    &:before {
+        position: absolute;
+        margin: 0 auto;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: #fff;
+        content: "";
+        opacity: 0.3;
+        -webkit-transform: scaleX(1);
+        transition-property:
+            opacity,
+            -webkit-transform;
+        transition-duration: 0.3s;
+    }
 
     &:hover:before {
-    opacity: 1;
-    -webkit-transform: scaleX(1.05);
-  }
+        opacity: 1;
+        -webkit-transform: scaleX(1.05);
+    }
 `;
 
 //   color: #fff;
@@ -194,7 +186,7 @@ export const HeroLink = styled.a`
 //   padding: 0.1rem 0rem;
 //   height: 100%;
 //   cursor: pointer;
-//   position:relative ; 
+//   position:relative ;
 
 //   &:before{
 //     position: absolute;
@@ -224,7 +216,7 @@ export const UDLLink = styled.a`
     margin: 0 2px;
     position: relative;
 
-    &:before{
+    &:before {
         position: absolute;
         margin: 0 auto;
         top: 100%;
@@ -232,29 +224,28 @@ export const UDLLink = styled.a`
         width: 100%;
         height: 2px;
         background-color: #000;
-        content: '';
-        opacity: .3;
+        content: "";
+        opacity: 0.3;
         -webkit-transform: scaleX(1);
-        transition-property: opacity, -webkit-transform;
-        transition-duration: .3s;
+        transition-property:
+            opacity,
+            -webkit-transform;
+        transition-duration: 0.3s;
     }
 
     &:hover:before {
         opacity: 1;
         -webkit-transform: scaleX(1.05);
-      }
-`
+    }
+`;
 
-
-
-
-export const HeroNewsTitle = styled.div` 
+export const HeroNewsTitle = styled.div`
     margin-left: 0px;
     color: #000000;
     font-size: 16px;
     font-weight: bold;
     line-height: 16px;
-    margin-bottom: 36px; 
+    margin-bottom: 36px;
 
     @media screen and (max-width: 768px) {
         font-size: 24px;
@@ -263,16 +254,16 @@ export const HeroNewsTitle = styled.div`
     @media screen and (max-width: 480px) {
         font-size: 18px;
     }
-`
+`;
 
-export const HeroCitationTitle = styled.div` 
+export const HeroCitationTitle = styled.div`
     margin-left: 0px;
     color: #000000;
     font-size: 16px;
     font-weight: bold;
     line-height: 16px;
-    margin-bottom: 10px; 
-    margin-top:36px;
+    margin-bottom: 10px;
+    margin-top: 36px;
 
     @media screen and (max-width: 768px) {
         font-size: 24px;
@@ -281,24 +272,17 @@ export const HeroCitationTitle = styled.div`
     @media screen and (max-width: 480px) {
         font-size: 18px;
     }
-`
+`;
 
-
-export const HeroNewsBlock = styled.div`
-
-`
+export const HeroNewsBlock = styled.div``;
 export const HeroCitationBlock = styled.div`
     font-size: 14px;
     margin-bottom: 0px;
     margin-top: 0px;
-
-`
-
-
-
+`;
 
 export const HeroFollowBlock = styled.div`
-@media screen and (max-width: 768px) {
-    font-size: 14px;
-}
-`
+    @media screen and (max-width: 768px) {
+        font-size: 14px;
+    }
+`;