tablet layout

src/App.tsx

@@ -343,12 +343,6 @@ const Container = styled.main<{$fullHeight: boolean}>`
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
     overflow: hidden;
 
-    @media (max-width: 900px) {
-        //flex-direction: column;
-        height: 100dvh;
-        margin: 0;
-    }
-
     ${({ theme }) => theme.media.mobile(css<{$fullHeight: boolean}>`
         margin: 0;
         width: 100%;
@@ -358,6 +352,12 @@ const Container = styled.main<{$fullHeight: boolean}>`
         height: ${({ $fullHeight }) => $fullHeight ? '100dvh' : '100svh'};
         border-radius:  ${({ $fullHeight }) => $fullHeight ? '0 0 8px 8px' : '0'};
     `)}
+    ${({ theme, $fullHeight }) => theme.media.tablet(css`
+        margin: 0 auto;
+        width: 100%;
+        border-radius:  ${() => $fullHeight ? '0 0 8px 8px' : '0'};
+        height: 100dvh;
+    `)};
 `;
 
 const Column = styled.section`
@@ -378,6 +378,9 @@ const Column = styled.section`
             border-left: none;
         }
     }
+    ${props => props.theme.media.tablet(css`
+        padding: 20px;
+    `)}
 `;
 
 const LeftColumn = styled(Column)<{$dataShow: boolean}>`
@@ -420,6 +423,33 @@ const TitleBlock = styled.div`
         color: ${({ theme }) => theme.colors.gray};
         font-weight: 350;
     }
+
+    ${({ theme }) => theme.media.mobile(css`
+        h1 {
+            font-size: 20px;
+            line-height: 24px;
+            font-weight: 700;
+        }
+
+        p {
+            font-size: 14px;
+            line-height: 16px;
+            font-weight: 350;
+        }
+    `)}
+    ${({ theme }) => theme.media.tablet(css`
+        h1 {
+            font-size: 20px;
+            line-height: 24px;
+            font-weight: 700;
+        }
+
+        p {
+            font-size: 14px;
+            line-height: 16px;
+            font-weight: 350;
+        }
+    `)}
 `;
 
 const FilterTitle = styled.div`
@@ -456,6 +486,18 @@ const FilterTitle = styled.div`
             margin: 0 auto;
         }
     `)}
+    ${({ theme }) => theme.media.tablet(css`
+        margin-bottom: 32px;
+        h2 {
+            padding-top: 10px;
+            font-size: 16px;
+            line-height: 19px;
+        }
+        p {
+            font-size: 14px;
+            line-height: 16px;
+        }
+    `)}
 `;
 
 const SettingsPanel = styled.div`

src/components/Accordion/Accordion.tsx

@@ -109,6 +109,14 @@ const HeaderTitle = styled.div`
     line-height: 19px;
     font-weight: 500;
     color: ${({ theme }) => theme.colors.darkGreen};
+    ${({ theme }) => theme.media.mobile(css`
+        font-size: 14px;
+        line-height: 16px;
+    `)}
+    ${({ theme }) => theme.media.tablet(css`
+        font-size: 14px;
+        line-height: 16px;
+    `)}
 `;
 
 const Description = styled.div`

src/components/Cart/Cart.tsx

@@ -1,5 +1,5 @@
 import {Dispatch, SetStateAction, useMemo, useState} from 'react';
-import styled from 'styled-components';
+import styled, {css} from 'styled-components';
 import {deleteProduct, replaceProduct} from '../../api/promoApi';
 import {useCartPolling} from '../../hooks/useCartPolling';
 import {declension} from '../../utils/declension';
@@ -231,6 +231,14 @@ const SummaryTitle = styled.div`
     font-weight: 600;
     color: ${({theme}) => theme.colors.darkGreen};
     margin-bottom: 8px;
+    ${({ theme }) => theme.media.mobile(css`
+        font-size: 16px;
+        line-height: 19px;
+    `)}
+    ${({ theme }) => theme.media.tablet(css`
+        font-size: 16px;
+        line-height: 19px;
+    `)}
 `;
 
 const Green = styled.span`
@@ -310,6 +318,12 @@ const Loader = styled.div<{ $hidden: boolean, "data-display-text": string }>`
         background-clip: text;
         animation: opacityAnim 1s ease-in-out -1s infinite alternate;
     }
+    ${({ theme }) => theme.media.mobile(css`
+        font-size: 14px;
+    `)}
+    ${({ theme }) => theme.media.tablet(css`
+        font-size: 14px;
+    `)}
 `;
 
 const ScrollWrapper = styled.div`

src/styles/theme.ts

@@ -29,7 +29,7 @@ export const theme = {
           }
         `,
         tablet: (inner: RuleSet) => css`
-          @media (max-width: 768px) {
+          @media (max-width: 900px) or (max-height: 600px) {
             ${inner};
           }
         `