Ott 306 tournament page adaptive (#160)

* style(#306): adaptive tournament page

* style(#306): usefvar logo adapted

* style(#306): logo margin

* style(#306): minor chanhe to match grid

src/features/MatchCard/styled.tsx

@@ -22,6 +22,7 @@ export const CardWrapper = styled.li.attrs({
 
   @media ${devices.laptop} {
     height: 279px;
+    min-width: 279px;
   }
 
   @media ${devices.tablet} {

src/features/MatchesGrid/styled.tsx

@@ -8,7 +8,7 @@ export const Wrapper = styled.ul`
   grid-gap: 13px;
  
   @media ${devices.large} {
-    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr ));
+    grid-template-columns: repeat(auto-fit, minmax(279px, 1fr ));
   }
 
   @media ${devices.tablet} {

src/features/MatchesSlider/styled.tsx

@@ -20,6 +20,11 @@ export const Slides = styled.ul`
 
   ${CardWrapper} {
     width: 288px;
+
+    @media ${devices.laptop} {
+      min-width: auto;
+      width: 279px;
+    }
   }
 
   @media ${devices.mobile} {

src/features/Menu/styled.tsx

@@ -17,7 +17,7 @@ export const Wrapper = styled.nav`
   margin-right: 14px;
 
   @media ${devices.desktop} {
-    margin-left: 23px;
+    margin-left: 16px;
     margin-right: 10px;
   }
 `

src/features/ProfileCard/styled.tsx

@@ -15,8 +15,7 @@ export const Wrapper = styled.div`
   }
 
   @media ${devices.laptop} {
-    margin-top: 14px;
+    margin-left: 0;
-    margin-left: 20px;
     margin-bottom: 20px;
   }
 `
@@ -101,6 +100,7 @@ export const InfoItems = styled.div`
   @media ${devices.laptop} {
     flex-direction: column;
     align-items: flex-start; 
+    justify-content: center;
   }
 
   @media ${devices.tablet} {

src/features/TournamentPage/styled.tsx

@@ -1,5 +1,11 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 export const Content = styled.main`
   padding: 0 16px;
+
+  @media ${devices.tablet} {
+    padding: 0;
+  }
 `

src/features/UserFavorites/index.tsx

@@ -41,7 +41,7 @@ export const UserFavorites = () => {
 
   return (
     <UserSportFavWrapper>
-      <UserSportFavLogoWrapper height={12} width={52} />
+      <UserSportFavLogoWrapper width={52} />
       <UserSportFavStar />
       <ScrollWrapper>
         {

src/features/UserFavorites/styled.tsx

@@ -1,5 +1,7 @@
 import { Link } from 'react-router-dom'
 
+import { devices } from 'config/devices'
+
 import styled from 'styled-components/macro'
 
 import { Logo } from 'features/Logo'
@@ -34,6 +36,11 @@ export const ScrollWrapper = styled.div`
 export const UserSportFavLogoWrapper = styled(Logo)`
   margin-top: 35px;
   margin-bottom: 120px;
+
+  @media ${devices.laptop} {
+    margin-top: 30px;
+    margin-bottom: 68px;
+  }
 `
 
 export const UserSportFavXWrapper = styled.span`