diff --git a/.history/README_20220712212642.md b/.history/README_20220712212642.md
new file mode 100644
index 0000000..e9b81e4
--- /dev/null
+++ b/.history/README_20220712212642.md
@@ -0,0 +1,16 @@
+Сайт для сервиса доставки пиццы.
+
+[Ссылка на сайт](https://pizza.krasnikov.pro/)
+
+### Задание на завтра
+1. [x] Исправить размер модального окна с добавление пиццы в корзину
+2. [ ] Перенести кнопку закрытия модального окна в верхний левый угол
+
+### Изменения 11.07.22
+1. Изменил размеры модального окна с карточкой пиццы под разные расширения экрана.
+2. Изменил внутренни размеры компонентов модального окна, что бы все помещались.
+3. Убрал появление синего цвета при нажатии.
+
+### Изменения 12.07.22
+1. Изменил расположение нижней панели карточки пиццы.
+2. 
\ No newline at end of file
diff --git a/.history/README_20220712230602.md b/.history/README_20220712230602.md
new file mode 100644
index 0000000..f78e5b4
--- /dev/null
+++ b/.history/README_20220712230602.md
@@ -0,0 +1,16 @@
+Сайт для сервиса доставки пиццы.
+
+[Ссылка на сайт](https://pizza.krasnikov.pro/)
+
+### Задание на завтра
+1. [x] Исправить размер модального окна с добавление пиццы в корзину
+2. [ ] Перенести кнопку закрытия модального окна в верхний левый угол
+
+### Изменения 11.07.22
+1. Изменил размеры модального окна с карточкой пиццы под разные расширения экрана.
+2. Изменил внутренни размеры компонентов модального окна, что бы все помещались.
+3. Убрал появление синего цвета при нажатии.
+
+### Изменения 12.07.22
+1. Изменил расположение нижней панели карточки пиццы.
+2. Перенастроил корзину. Но пака не доделал новый дизайн карточки продукта. 
\ No newline at end of file
diff --git a/.history/README_20220712230604.md b/.history/README_20220712230604.md
new file mode 100644
index 0000000..89e1462
--- /dev/null
+++ b/.history/README_20220712230604.md
@@ -0,0 +1,16 @@
+Сайт для сервиса доставки пиццы.
+
+[Ссылка на сайт](https://pizza.krasnikov.pro/)
+
+### Задание на завтра
+1. [x] Исправить размер модального окна с добавление пиццы в корзину
+2. [ ] Перенести кнопку закрытия модального окна в верхний левый угол
+
+### Изменения 11.07.22
+1. Изменил размеры модального окна с карточкой пиццы под разные расширения экрана.
+2. Изменил внутренни размеры компонентов модального окна, что бы все помещались.
+3. Убрал появление синего цвета при нажатии.
+
+### Изменения 12.07.22
+1. Изменил расположение нижней панели карточки пиццы.
+2. Перенастроил корзину. Но пака не доделал новый дизайн карточки продукта.
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220712215145.tsx b/.history/components/customer/pages/index/modals/cart/content_20220712215145.tsx
new file mode 100644
index 0000000..217b4a6
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220712215145.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='promo_button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220712215330.tsx b/.history/components/customer/pages/index/modals/cart/content_20220712215330.tsx
new file mode 100644
index 0000000..af3084c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220712215330.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='check_box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220712215453.tsx b/.history/components/customer/pages/index/modals/cart/content_20220712215453.tsx
new file mode 100644
index 0000000..01bf5f2
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220712215453.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='box'>
+                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                </div>
+                <div className='check_box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='check_text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/content_20220712215541.tsx b/.history/components/customer/pages/index/modals/cart/content_20220712215541.tsx
new file mode 100644
index 0000000..957269b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/content_20220712215541.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"} scroll={false}>
+            <button className={classNames('button_close')} onClick={addBasket}>X</button>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='box'>
+                    <p >Доставка </p> <p className='text'>{delivery} ₽</p>
+                </div>
+                <div className='box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Button styles={'yellow button_size_48'}
+                    align={'button_align_center'}
+                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+            </Button>
+        </div>
+    </>
+  );
+};
+
+
diff --git a/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712213002.tsx b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712213002.tsx
new file mode 100644
index 0000000..72e5727
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712213002.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContentCart } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCart: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+  //  dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className='pizza_modal_card'>
+      <div className='dialog'>
+        <div className='content'>
+          <div className='body'>
+              {<PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712213021.tsx b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712213021.tsx
new file mode 100644
index 0000000..72e5727
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712213021.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContentCart } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCart: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+  //  dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className='pizza_modal_card'>
+      <div className='dialog'>
+        <div className='content'>
+          <div className='body'>
+              {<PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712213218.tsx b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712213218.tsx
new file mode 100644
index 0000000..9a779aa
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712213218.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContentCart } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCart: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+  //  dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className='pizza_modal_cart'>
+      <div className='dialog'>
+        <div className='content'>
+          <div className='body'>
+              {<PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712220637.tsx b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712220637.tsx
new file mode 100644
index 0000000..809c215
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712220637.tsx
@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContentCart } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCart: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+  //  dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className='pizza_modal_cart'>
+      <div className='dialog'>
+        <div className='content'>
+              {<PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />}
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712221256.tsx b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712221256.tsx
new file mode 100644
index 0000000..8347589
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712221256.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContentCart } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCart: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+  //  dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className='pizza_modal_cart'>
+      <div className='dialog'>
+        {<PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712221340.tsx b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712221340.tsx
new file mode 100644
index 0000000..7a2fa82
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/pizzaCart_20220712221340.tsx
@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux'
+import { Modal } from '../../../../../UI';
+import { useAppDispatch } from '../../../../../../redux/store';
+import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
+import { PizzaModalsContentCart } from './';
+
+type Props = {
+  id: any;
+  otherProp?: any;
+};
+
+export const PizzaCart: React.FC<Props> = ({id}) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+  //  dispatch( fetchPizzaToCard({id}) );
+  }, [dispatch, id]);
+
+  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
+
+  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
+  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
+
+  return (
+    <div id='openModal' className='pizza_modal_cart'>
+      <div className='dialog'>
+        <div className='content'>
+            {<PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />}
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/styles/components/block/Cart.scss b/.history/components/customer/pages/index/modals/cart/styles/Cart_20220618144724.scss
similarity index 100%
rename from styles/components/block/Cart.scss
rename to .history/components/customer/pages/index/modals/cart/styles/Cart_20220618144724.scss
diff --git a/.history/components/customer/pages/index/modals/cart/styles/Cart_20220712213531.scss b/.history/components/customer/pages/index/modals/cart/styles/Cart_20220712213531.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712213403.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712213403.scss
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712213521.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712213521.scss
new file mode 100644
index 0000000..22e5154
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712213521.scss
@@ -0,0 +1,139 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.cart{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: calc(100vh - 670px);
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 200%;
+        position: relative;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712213638.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712213638.scss
new file mode 100644
index 0000000..10b6088
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712213638.scss
@@ -0,0 +1,139 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.pizza_modal_cart{
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: calc(100vh - 670px);
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 200%;
+        position: relative;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712213742.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712213742.scss
new file mode 100644
index 0000000..0eabc2b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712213742.scss
@@ -0,0 +1,149 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.pizza_modal_cart{
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: calc(100vh - 670px);
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 200%;
+        position: relative;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712213824.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712213824.scss
new file mode 100644
index 0000000..552aa19
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712213824.scss
@@ -0,0 +1,143 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.pizza_modal_cart{
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+  
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: calc(100vh - 670px);
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 200%;
+        position: relative;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712213925.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712213925.scss
new file mode 100644
index 0000000..68ba758
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712213925.scss
@@ -0,0 +1,188 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.pizza_modal_cart{
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+  
+        @media (min-width:780px) {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            height: 533px;
+            width: 900px;
+            -webkit-transform: translate(-50%, -50%);
+            -moz-transform: translate(-50%, -50%);
+            -ms-transform: translate(-50%, -50%);
+            -o-transform: translate(-50%, -50%);
+        }
+  
+          /* Modal Content */
+        .content {
+          background-color: #fefefe;
+          margin: auto;
+          @media (max-width:760px) {
+  
+          }
+          @media (min-width:780px) {
+            border-radius: 20px;
+          }
+          /*border: 1px solid #888;*/
+          .body{
+            height: 100%;
+            flex-wrap: wrap;
+            display: flex;
+          }
+        }
+    }
+
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: calc(100vh - 670px);
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 200%;
+        position: relative;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712214053.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214053.scss
new file mode 100644
index 0000000..6791784
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214053.scss
@@ -0,0 +1,45 @@
+.pizza_modal_card {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      @media (max-width:760px) {
+          height: 533px;
+          width: 400px;
+          margin: 0 auto;
+      }
+
+      @media (min-width:780px) {
+          position: fixed;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          height: 533px;
+          width: 900px;
+          -webkit-transform: translate(-50%, -50%);
+          -moz-transform: translate(-50%, -50%);
+          -ms-transform: translate(-50%, -50%);
+          -o-transform: translate(-50%, -50%);
+      }
+
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        @media (max-width:760px) {
+
+        }
+        @media (min-width:780px) {
+          border-radius: 20px;
+        }
+        /*border: 1px solid #888;*/
+    }
+}
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712214117.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214117.scss
new file mode 100644
index 0000000..f6bff73
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214117.scss
@@ -0,0 +1,45 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      @media (max-width:760px) {
+          height: 533px;
+          width: 400px;
+          margin: 0 auto;
+      }
+
+      @media (min-width:780px) {
+          position: fixed;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          height: 533px;
+          width: 900px;
+          -webkit-transform: translate(-50%, -50%);
+          -moz-transform: translate(-50%, -50%);
+          -ms-transform: translate(-50%, -50%);
+          -o-transform: translate(-50%, -50%);
+      }
+
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        @media (max-width:760px) {
+
+        }
+        @media (min-width:780px) {
+          border-radius: 20px;
+        }
+        /*border: 1px solid #888;*/
+    }
+}
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712214151.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214151.scss
new file mode 100644
index 0000000..f4ca1d8
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214151.scss
@@ -0,0 +1,42 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      @media (max-width:760px) {
+          height: 533px;
+          width: 400px;
+          margin: 0 auto;
+      }
+
+      @media (min-width:780px) {
+        height: 100vh;
+        min-height: 600px;
+        width: 430px;
+        position: absolute;
+        right: 0;
+        left: unset !important;
+        background-color: #F7F7F7;
+      }
+
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        @media (max-width:760px) {
+
+        }
+        @media (min-width:780px) {
+          border-radius: 20px;
+        }
+        /*border: 1px solid #888;*/
+    }
+}
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712214330.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214330.scss
new file mode 100644
index 0000000..c66d1c5
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214330.scss
@@ -0,0 +1,42 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      @media (max-width:760px) {
+          height: 533px;
+          width: 400px;
+          margin: 0 auto;
+      }
+
+      @media (min-width:780px) {
+        height: 100vh;
+        min-height: 600px;
+        width: 430px;
+        position: absolute;
+        right: 0;
+        left: unset !important;
+        background-color: #F7F7F7;
+      }
+
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        @media (max-width:760px) {
+
+        }
+        @media (min-width:780px) {
+        
+        }
+        /*border: 1px solid #888;*/
+    }
+}
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712214335.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214335.scss
new file mode 100644
index 0000000..b6eef23
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214335.scss
@@ -0,0 +1,41 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      @media (max-width:760px) {
+          height: 533px;
+          width: 400px;
+          margin: 0 auto;
+      }
+
+      @media (min-width:780px) {
+        height: 100vh;
+        min-height: 600px;
+        width: 430px;
+        position: absolute;
+        right: 0;
+        left: unset !important;
+        background-color: #F7F7F7;
+      }
+
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        @media (max-width:760px) {
+
+        }
+        @media (min-width:780px) {
+        
+        }
+    }
+}
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712214350.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214350.scss
new file mode 100644
index 0000000..2d0d82f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214350.scss
@@ -0,0 +1,33 @@
+.pizza_modal_cart {
+  
+
+    .dialog {
+      @media (max-width:760px) {
+          height: 533px;
+          width: 400px;
+          margin: 0 auto;
+      }
+
+      @media (min-width:780px) {
+        height: 100vh;
+        min-height: 600px;
+        width: 430px;
+        position: absolute;
+        right: 0;
+        left: unset !important;
+        background-color: #F7F7F7;
+      }
+
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        @media (max-width:760px) {
+
+        }
+        @media (min-width:780px) {
+        
+        }
+    }
+}
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712214357.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214357.scss
new file mode 100644
index 0000000..b6eef23
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214357.scss
@@ -0,0 +1,41 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+      @media (max-width:760px) {
+          height: 533px;
+          width: 400px;
+          margin: 0 auto;
+      }
+
+      @media (min-width:780px) {
+        height: 100vh;
+        min-height: 600px;
+        width: 430px;
+        position: absolute;
+        right: 0;
+        left: unset !important;
+        background-color: #F7F7F7;
+      }
+
+        /* Modal Content */
+      .content {
+        background-color: #fefefe;
+        margin: auto;
+        @media (max-width:760px) {
+
+        }
+        @media (min-width:780px) {
+        
+        }
+    }
+}
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712214541.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214541.scss
new file mode 100644
index 0000000..1e82772
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214541.scss
@@ -0,0 +1,41 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712214738.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214738.scss
new file mode 100644
index 0000000..ecbe60f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214738.scss
@@ -0,0 +1,48 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712214917.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214917.scss
new file mode 100644
index 0000000..d215d1b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214917.scss
@@ -0,0 +1,53 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712214939.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214939.scss
new file mode 100644
index 0000000..e3a1216
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712214939.scss
@@ -0,0 +1,60 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712215007.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215007.scss
new file mode 100644
index 0000000..62360f4
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215007.scss
@@ -0,0 +1,66 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712215022.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215022.scss
new file mode 100644
index 0000000..709e9cf
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215022.scss
@@ -0,0 +1,73 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712215041.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215041.scss
new file mode 100644
index 0000000..a9c2794
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215041.scss
@@ -0,0 +1,81 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712215147.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215147.scss
new file mode 100644
index 0000000..9165a40
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215147.scss
@@ -0,0 +1,104 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+                }
+            }
+
+            
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712215231.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215231.scss
new file mode 100644
index 0000000..14fb48b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215231.scss
@@ -0,0 +1,119 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+            }
+
+            
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712215322.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215322.scss
new file mode 100644
index 0000000..14fb48b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215322.scss
@@ -0,0 +1,119 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+            }
+
+            
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712215424.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215424.scss
new file mode 100644
index 0000000..daf4d07
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215424.scss
@@ -0,0 +1,125 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+                }
+            }
+
+            
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712215544.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215544.scss
new file mode 100644
index 0000000..c5e5cfc
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215544.scss
@@ -0,0 +1,133 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712215545.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215545.scss
new file mode 100644
index 0000000..c5e5cfc
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215545.scss
@@ -0,0 +1,133 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712215753.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215753.scss
new file mode 100644
index 0000000..4d2fe3e
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712215753.scss
@@ -0,0 +1,141 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+
+            .button_close{
+                right: 90px;
+                position: relative;
+                font-size: 40px;
+                color: azure;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712221310.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221310.scss
new file mode 100644
index 0000000..bdb12da
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221310.scss
@@ -0,0 +1,142 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+            background-color: #fefefe
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+
+            }
+
+            .button_close{
+                right: 90px;
+                position: relative;
+                font-size: 40px;
+                color: azure;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712221423.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221423.scss
new file mode 100644
index 0000000..2e1da0f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221423.scss
@@ -0,0 +1,147 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+        @media (min-width:780px) {
+            height: 100vh;
+            min-height: 600px;
+            width: 430px;
+            position: absolute;
+            right: 0;
+            left: unset !important;
+            background-color: #F7F7F7;
+        }
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+                background-color: #F7F7F7;
+            }
+
+            .button_close{
+                right: 90px;
+                position: relative;
+                font-size: 40px;
+                color: azure;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712221438.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221438.scss
new file mode 100644
index 0000000..488fd8f
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221438.scss
@@ -0,0 +1,139 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+
+       
+
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+                background-color: #F7F7F7;
+            }
+
+            .button_close{
+                right: 90px;
+                position: relative;
+                font-size: 40px;
+                color: azure;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712221449.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221449.scss
new file mode 100644
index 0000000..f5d101d
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221449.scss
@@ -0,0 +1,131 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+
+            }
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+                background-color: #F7F7F7;
+            }
+
+            .button_close{
+                right: 90px;
+                position: relative;
+                font-size: 40px;
+                color: azure;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712221500.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221500.scss
new file mode 100644
index 0000000..8cbe2f3
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221500.scss
@@ -0,0 +1,134 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+                background-color: #F7F7F7;
+            }
+
+            .button_close{
+                right: 90px;
+                position: relative;
+                font-size: 40px;
+                color: azure;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712221620.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221620.scss
new file mode 100644
index 0000000..dd354b7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221620.scss
@@ -0,0 +1,133 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 90px;
+                position: relative;
+                font-size: 40px;
+                color: azure;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 670px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712221727.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221727.scss
new file mode 100644
index 0000000..dc399a8
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712221727.scss
@@ -0,0 +1,133 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 90px;
+                position: relative;
+                font-size: 40px;
+                color: azure;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 770px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: absolute;
+                bottom: 210px;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: absolute;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                height: 197px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712222102.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712222102.scss
new file mode 100644
index 0000000..2e67ec7
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712222102.scss
@@ -0,0 +1,131 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 90px;
+                position: relative;
+                font-size: 40px;
+                color: azure;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712222315.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712222315.scss
new file mode 100644
index 0000000..79d2d47
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712222315.scss
@@ -0,0 +1,132 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 90px;
+                position: relative;
+                font-size: 40px;
+                color: azure;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712222742.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712222742.scss
new file mode 100644
index 0000000..369ca4a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712222742.scss
@@ -0,0 +1,134 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 90px;
+                position: relative;
+                font-size: 40px;
+                color: azure;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712223005.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712223005.scss
new file mode 100644
index 0000000..730db90
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712223005.scss
@@ -0,0 +1,134 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 90px;
+                position: absolute;
+                font-size: 40px;
+                color: azure;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712223012.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712223012.scss
new file mode 100644
index 0000000..369ca4a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712223012.scss
@@ -0,0 +1,134 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 90px;
+                position: relative;
+                font-size: 40px;
+                color: azure;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712223244.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712223244.scss
new file mode 100644
index 0000000..a72bf5b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712223244.scss
@@ -0,0 +1,136 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                background: white;
+                border: white;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                position: absolute;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712223333.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712223333.scss
new file mode 100644
index 0000000..e05996c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712223333.scss
@@ -0,0 +1,135 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                background: white;
+                border: white;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712223430.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712223430.scss
new file mode 100644
index 0000000..d793eb0
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712223430.scss
@@ -0,0 +1,135 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                background: white;
+                border: white;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712224550.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712224550.scss
new file mode 100644
index 0000000..35faecc
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712224550.scss
@@ -0,0 +1,136 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                color: #FFFFFF;
+                background: white;
+                border: white;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712224558.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712224558.scss
new file mode 100644
index 0000000..71cc139
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712224558.scss
@@ -0,0 +1,134 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                color: #FFFFFF;
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712225803.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712225803.scss
new file mode 100644
index 0000000..a7ef438
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712225803.scss
@@ -0,0 +1,135 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                color: #FFFFFF;
+                background: rgba(0, 0, 0, 0);
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712225914.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712225914.scss
new file mode 100644
index 0000000..d38205a
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712225914.scss
@@ -0,0 +1,137 @@
+.button_close{
+    right: 450px;
+    position: absolute;
+    font-size: 40px;
+    top: 50%;
+    color: #FFFFFF;
+    background: rgba(0, 0, 0, 0);
+}
+
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+           
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712225924.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712225924.scss
new file mode 100644
index 0000000..a7ef438
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712225924.scss
@@ -0,0 +1,135 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                color: #FFFFFF;
+                background: rgba(0, 0, 0, 0);
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712230005.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230005.scss
new file mode 100644
index 0000000..f26a0b5
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230005.scss
@@ -0,0 +1,135 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                color: #FFFFFF;
+                background-color: rgba(0, 125, 215, 0.7);
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712230018.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230018.scss
new file mode 100644
index 0000000..3d39999
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230018.scss
@@ -0,0 +1,135 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0.7);
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712230028.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230028.scss
new file mode 100644
index 0000000..7e050df
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230028.scss
@@ -0,0 +1,135 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 1);
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712230035.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230035.scss
new file mode 100644
index 0000000..86b501b
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230035.scss
@@ -0,0 +1,135 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712230138.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230138.scss
new file mode 100644
index 0000000..1a705b3
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230138.scss
@@ -0,0 +1,136 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                border: 3px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712230148.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230148.scss
new file mode 100644
index 0000000..11abf10
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230148.scss
@@ -0,0 +1,136 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                border: 1px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712230154.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230154.scss
new file mode 100644
index 0000000..2bb4229
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230154.scss
@@ -0,0 +1,136 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 50%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712230204.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230204.scss
new file mode 100644
index 0000000..4039b4c
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230204.scss
@@ -0,0 +1,136 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 40%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220712230207.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230207.scss
new file mode 100644
index 0000000..825b1c3
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220712230207.scss
@@ -0,0 +1,136 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 45%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/cart/styles/old_20220712214011 b/.history/components/customer/pages/index/modals/cart/styles/old_20220712214011
new file mode 100644
index 0000000..e69de29
diff --git a/.history/components/customer/pages/index/modals/cart/styles/old_20220712214014 b/.history/components/customer/pages/index/modals/cart/styles/old_20220712214014
new file mode 100644
index 0000000..68ba758
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/cart/styles/old_20220712214014
@@ -0,0 +1,188 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.pizza_modal_cart{
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+  
+        @media (min-width:780px) {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            height: 533px;
+            width: 900px;
+            -webkit-transform: translate(-50%, -50%);
+            -moz-transform: translate(-50%, -50%);
+            -ms-transform: translate(-50%, -50%);
+            -o-transform: translate(-50%, -50%);
+        }
+  
+          /* Modal Content */
+        .content {
+          background-color: #fefefe;
+          margin: auto;
+          @media (max-width:760px) {
+  
+          }
+          @media (min-width:780px) {
+            border-radius: 20px;
+          }
+          /*border: 1px solid #888;*/
+          .body{
+            height: 100%;
+            flex-wrap: wrap;
+            display: flex;
+          }
+        }
+    }
+
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: calc(100vh - 670px);
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 200%;
+        position: relative;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220712222655.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220712222655.scss
new file mode 100644
index 0000000..e69de29
diff --git a/styles/components/block/CardBasketProduct.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220712222713.scss
similarity index 100%
rename from styles/components/block/CardBasketProduct.scss
rename to .history/components/customer/pages/index/modals/cart/styles/product_box_20220712222713.scss
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212225.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212225.scss
new file mode 100644
index 0000000..600a943
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212225.scss
@@ -0,0 +1,98 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    @media (max-width:760px) {
+        height: 220px;
+      }
+
+      @media (min-width:780px) {
+        height: 180px;
+      }
+
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box {
+                border-radius: 30%;
+                height: 128px;
+
+                &.none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                &.yellow_ing {
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+
+                @import 'products';
+            }
+        }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212234.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212234.scss
new file mode 100644
index 0000000..be521ea
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212234.scss
@@ -0,0 +1,98 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    @media (max-width:760px) {
+        height: 220px;
+    }
+
+    @media (min-width:780px) {
+        height: 180px;
+    }
+
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box {
+                border-radius: 30%;
+                height: 128px;
+
+                &.none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                &.yellow_ing {
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+
+                @import 'products';
+            }
+        }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212239.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212239.scss
new file mode 100644
index 0000000..be521ea
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212239.scss
@@ -0,0 +1,98 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    @media (max-width:760px) {
+        height: 220px;
+    }
+
+    @media (min-width:780px) {
+        height: 180px;
+    }
+
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box {
+                border-radius: 30%;
+                height: 128px;
+
+                &.none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                &.yellow_ing {
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+
+                @import 'products';
+            }
+        }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212252.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212252.scss
new file mode 100644
index 0000000..24beac1
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212252.scss
@@ -0,0 +1,98 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    @media (max-width:760px) {
+        height: 180px;
+    }
+
+    @media (min-width:780px) {
+        height: 220px;
+    }
+
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box {
+                border-radius: 30%;
+                height: 128px;
+
+                &.none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                &.yellow_ing {
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+
+                @import 'products';
+            }
+        }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212338.scss b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212338.scss
new file mode 100644
index 0000000..9c84b41
--- /dev/null
+++ b/.history/components/customer/pages/index/modals/pizza/styles/_ingredients_20220712212338.scss
@@ -0,0 +1,98 @@
+$color_yellow: #FED11E;
+$color_none: #dad9d8;
+
+.ingredients{
+    text-align: center;
+    @media (max-width:760px) {
+        height: 200px;
+    }
+
+    @media (min-width:780px) {
+        height: 220px;
+    }
+
+    overflow-y: scroll;
+    margin-left: 10px;
+
+    @media (min-width: 640px) {
+        ul {
+          padding-top: 8px;
+          flex-wrap: wrap;
+        }
+    }
+
+    .ul {
+        padding-top: 16px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+        .li {
+            list-style-type: none;
+            margin: 5px;
+            width: 83px;
+
+            .text_box {
+                border-radius: 30%;
+                height: 128px;
+
+                &.none_ing {
+                    background-color: $color_none;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                &.yellow_ing {
+                    background-color: $color_yellow;
+                    padding: 5px 5px 5px 5px;
+                }
+
+                .img_ing {
+                    color: rgb(0, 0, 0);
+                    height: 52px;
+                    width: 52px;
+                    margin: 0 auto;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+
+                .title_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .price_ing{
+                    color: rgb(0, 0, 0);
+                    font-size: 12px;
+                }
+
+                .button_ing{
+                    display: inline-block;
+                    -webkit-border-radius: 12px;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    -khtml-border-radius: 50%;;
+                    width: 28px;
+                    height: 25px;
+                    margin-top: 10px;
+                    border: aliceblue;
+                }
+
+                @import 'products';
+            }
+        }
+
+    .buttonCheck{
+        font-size: 24px;
+    }
+
+}
+
+.plus{
+    background: url('/assets/img/plus.png') 100% 100% no-repeat;
+  }
+
+  .minus{
+    background: url('/assets/img/minus.png') 0% no-repeat;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
\ No newline at end of file
diff --git a/.history/old_20220712214013 b/.history/old_20220712214013
new file mode 100644
index 0000000..68ba758
--- /dev/null
+++ b/.history/old_20220712214013
@@ -0,0 +1,188 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.pizza_modal_cart{
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+  
+        @media (min-width:780px) {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            height: 533px;
+            width: 900px;
+            -webkit-transform: translate(-50%, -50%);
+            -moz-transform: translate(-50%, -50%);
+            -ms-transform: translate(-50%, -50%);
+            -o-transform: translate(-50%, -50%);
+        }
+  
+          /* Modal Content */
+        .content {
+          background-color: #fefefe;
+          margin: auto;
+          @media (max-width:760px) {
+  
+          }
+          @media (min-width:780px) {
+            border-radius: 20px;
+          }
+          /*border: 1px solid #888;*/
+          .body{
+            height: 100%;
+            flex-wrap: wrap;
+            display: flex;
+          }
+        }
+    }
+
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+    .button_close{
+        right: 90px;
+        position: relative;
+        font-size: 40px;
+        color: azure;
+    }
+
+    .header{
+        width: 430px;
+        height: 49px;
+        position: absolute;
+        padding: 15px;
+        background-color: #FFFFFF;
+    }
+
+    .body{
+        height: calc(100vh - 670px);
+        width: 100%;
+    }
+
+    .body_order{
+        width: 100%;
+        height: 200%;
+        position: relative;
+        overflow: scroll;
+    }
+
+    .body_additionally{
+        width: 100%;
+     
+        position: absolute;
+        bottom: 210px;
+    }
+
+    .body_additionally_text{
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.02em;
+        padding: 10px;
+    }
+
+    .basket_footer{
+        position: absolute;
+        bottom: 0;
+        width: 430px;
+        background-color: #FFFFFF;
+        height: 197px;
+    }
+
+    .check{
+        font-size: 18px;
+        line-height: 28px;
+        padding: 15px;
+    }
+
+    .check_box{
+        border-bottom: 1px dashed #8E8E93;
+        display: flex;
+    }
+
+    .check_text{
+        right: 30px;
+        position: absolute;
+    }
+
+    .promo_input{
+        border: none;
+        margin: 0;
+        outline: none;
+        -webkit-appearance: none;
+        color: #252A48;
+        font-size: 18px;
+        padding: 0px 20px 0 20px;
+        height: 38px;
+    }
+
+    .promo_code_box{
+        flex: none;
+        padding: 5px;
+        order: 0;
+        flex-grow: 1;
+        margin: 0px 12px;
+        border: 1px solid #8E8E93;
+        border-radius: 10px;
+    }
+
+    .promo_button{
+        border: none;
+        margin: 0;
+        padding: 0;
+        font-size: 18px;
+        line-height: 30px;
+        color: #1C80E3;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover{
+            color: lighten(#000000, 10%);
+        }
+    }
+}
diff --git a/.history/old_20220712230413 b/.history/old_20220712230413
new file mode 100644
index 0000000..051cc41
--- /dev/null
+++ b/.history/old_20220712230413
@@ -0,0 +1,112 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.pizza_modal_cart{
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+  
+        @media (min-width:780px) {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            height: 533px;
+            width: 900px;
+            -webkit-transform: translate(-50%, -50%);
+            -moz-transform: translate(-50%, -50%);
+            -ms-transform: translate(-50%, -50%);
+            -o-transform: translate(-50%, -50%);
+        }
+  
+          /* Modal Content */
+        .content {
+          background-color: #fefefe;
+          margin: auto;
+          @media (max-width:760px) {
+  
+          }
+          @media (min-width:780px) {
+            border-radius: 20px;
+          }
+          /*border: 1px solid #888;*/
+          .body{
+            height: 100%;
+            flex-wrap: wrap;
+            display: flex;
+          }
+        }
+    }
+
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+   
+
+
+
+
+
+   
+
+    
+
+    
+
+   
+
+   
+
+ 
+
+    
+   
+
+
+
+    
+}
diff --git a/.history/styles/globals_20220517170427.scss b/.history/styles/globals_20220517170427.scss
deleted file mode 100644
index 39de0cf..0000000
--- a/.history/styles/globals_20220517170427.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220520132253.scss b/.history/styles/globals_20220520132253.scss
deleted file mode 100644
index cfd1d73..0000000
--- a/.history/styles/globals_20220520132253.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss'
\ No newline at end of file
diff --git a/.history/styles/globals_20220520132834.scss b/.history/styles/globals_20220520132834.scss
deleted file mode 100644
index fcca351..0000000
--- a/.history/styles/globals_20220520132834.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss'
-@import './components/UX/Input.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220520132838.scss b/.history/styles/globals_20220520132838.scss
deleted file mode 100644
index c511388..0000000
--- a/.history/styles/globals_20220520132838.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220520132934.scss b/.history/styles/globals_20220520132934.scss
deleted file mode 100644
index 38c5222..0000000
--- a/.history/styles/globals_20220520132934.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220528233948.scss b/.history/styles/globals_20220528233948.scss
deleted file mode 100644
index eb3e63d..0000000
--- a/.history/styles/globals_20220528233948.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
diff --git a/.history/styles/globals_20220528233950.scss b/.history/styles/globals_20220528233950.scss
deleted file mode 100644
index f2de895..0000000
--- a/.history/styles/globals_20220528233950.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import url();
\ No newline at end of file
diff --git a/.history/styles/globals_20220528233953.scss b/.history/styles/globals_20220528233953.scss
deleted file mode 100644
index a878e36..0000000
--- a/.history/styles/globals_20220528233953.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './';
\ No newline at end of file
diff --git a/.history/styles/globals_20220528233955.scss b/.history/styles/globals_20220528233955.scss
deleted file mode 100644
index ede39ae..0000000
--- a/.history/styles/globals_20220528233955.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220528233959.scss b/.history/styles/globals_20220528233959.scss
deleted file mode 100644
index 49c389c..0000000
--- a/.history/styles/globals_20220528233959.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220528235318.scss b/.history/styles/globals_20220528235318.scss
deleted file mode 100644
index c118512..0000000
--- a/.history/styles/globals_20220528235318.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
diff --git a/.history/styles/globals_20220528235323.scss b/.history/styles/globals_20220528235323.scss
deleted file mode 100644
index 7959813..0000000
--- a/.history/styles/globals_20220528235323.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import url();
\ No newline at end of file
diff --git a/.history/styles/globals_20220528235326.scss b/.history/styles/globals_20220528235326.scss
deleted file mode 100644
index a9d3baa..0000000
--- a/.history/styles/globals_20220528235326.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './';
\ No newline at end of file
diff --git a/.history/styles/globals_20220528235328.scss b/.history/styles/globals_20220528235328.scss
deleted file mode 100644
index 54e3b0a..0000000
--- a/.history/styles/globals_20220528235328.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220528235332.scss b/.history/styles/globals_20220528235332.scss
deleted file mode 100644
index 4c6572e..0000000
--- a/.history/styles/globals_20220528235332.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529002400.scss b/.history/styles/globals_20220529002400.scss
deleted file mode 100644
index 7fc459e..0000000
--- a/.history/styles/globals_20220529002400.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
diff --git a/.history/styles/globals_20220529002404.scss b/.history/styles/globals_20220529002404.scss
deleted file mode 100644
index 73abb5b..0000000
--- a/.history/styles/globals_20220529002404.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import ;
\ No newline at end of file
diff --git a/.history/styles/globals_20220529002407.scss b/.history/styles/globals_20220529002407.scss
deleted file mode 100644
index a1e9df1..0000000
--- a/.history/styles/globals_20220529002407.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529002409.scss b/.history/styles/globals_20220529002409.scss
deleted file mode 100644
index 112e5cd..0000000
--- a/.history/styles/globals_20220529002409.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529002411.scss b/.history/styles/globals_20220529002411.scss
deleted file mode 100644
index db57ab0..0000000
--- a/.history/styles/globals_20220529002411.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529002412.scss b/.history/styles/globals_20220529002412.scss
deleted file mode 100644
index db57ab0..0000000
--- a/.history/styles/globals_20220529002412.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529134250.scss b/.history/styles/globals_20220529134250.scss
deleted file mode 100644
index aeef7cb..0000000
--- a/.history/styles/globals_20220529134250.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
diff --git a/.history/styles/globals_20220529134253.scss b/.history/styles/globals_20220529134253.scss
deleted file mode 100644
index 8092dda..0000000
--- a/.history/styles/globals_20220529134253.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
-@in
\ No newline at end of file
diff --git a/.history/styles/globals_20220529134254.scss b/.history/styles/globals_20220529134254.scss
deleted file mode 100644
index 3ac3112..0000000
--- a/.history/styles/globals_20220529134254.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
-@i
\ No newline at end of file
diff --git a/.history/styles/globals_20220529134300.scss b/.history/styles/globals_20220529134300.scss
deleted file mode 100644
index dbd734a..0000000
--- a/.history/styles/globals_20220529134300.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
-@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529134301.scss b/.history/styles/globals_20220529134301.scss
deleted file mode 100644
index a45153e..0000000
--- a/.history/styles/globals_20220529134301.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
-@import './components/CardPizza.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529134302.scss b/.history/styles/globals_20220529134302.scss
deleted file mode 100644
index a45153e..0000000
--- a/.history/styles/globals_20220529134302.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
-@import './components/CardPizza.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529143548.scss b/.history/styles/globals_20220529143548.scss
deleted file mode 100644
index f4af276..0000000
--- a/.history/styles/globals_20220529143548.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
-@import './components/CardPizza.scss';
-@import './components//';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529143553.scss b/.history/styles/globals_20220529143553.scss
deleted file mode 100644
index 62bb892..0000000
--- a/.history/styles/globals_20220529143553.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
-@import './components/CardPizza.scss';
-@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529143555.scss b/.history/styles/globals_20220529143555.scss
deleted file mode 100644
index 90567e1..0000000
--- a/.history/styles/globals_20220529143555.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
-@import './components/CardPizza.scss';
-@import './components/UX/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220529143556.scss b/.history/styles/globals_20220529143556.scss
deleted file mode 100644
index 5377faf..0000000
--- a/.history/styles/globals_20220529143556.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
-@import './components/CardPizza.scss';
-@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530181012.scss b/.history/styles/globals_20220530181012.scss
deleted file mode 100644
index 59738dc..0000000
--- a/.history/styles/globals_20220530181012.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
-@import './components/CardPizza.scss';
-@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530181015.scss b/.history/styles/globals_20220530181015.scss
deleted file mode 100644
index 59738dc..0000000
--- a/.history/styles/globals_20220530181015.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/MottoBlock.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
-@import './components/CardPizza.scss';
-@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530181058.scss b/.history/styles/globals_20220530181058.scss
deleted file mode 100644
index 361eb41..0000000
--- a/.history/styles/globals_20220530181058.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/Categories.scss';
-@import './components/Box.scss';
-@import './components/CardPizza.scss';
-@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530181100.scss b/.history/styles/globals_20220530181100.scss
deleted file mode 100644
index 229c2bc..0000000
--- a/.history/styles/globals_20220530181100.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/CardPizza.scss';
-@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530181104.scss b/.history/styles/globals_20220530181104.scss
deleted file mode 100644
index c5a1bc5..0000000
--- a/.history/styles/globals_20220530181104.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/CardStock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530181114.scss b/.history/styles/globals_20220530181114.scss
deleted file mode 100644
index ae8d7f3..0000000
--- a/.history/styles/globals_20220530181114.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191125.scss b/.history/styles/globals_20220530191125.scss
deleted file mode 100644
index 9816eab..0000000
--- a/.history/styles/globals_20220530191125.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/ButtonImg.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191128.scss b/.history/styles/globals_20220530191128.scss
deleted file mode 100644
index e535599..0000000
--- a/.history/styles/globals_20220530191128.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191130.scss b/.history/styles/globals_20220530191130.scss
deleted file mode 100644
index ccc5e9c..0000000
--- a/.history/styles/globals_20220530191130.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191342.scss b/.history/styles/globals_20220530191342.scss
deleted file mode 100644
index e08edaf..0000000
--- a/.history/styles/globals_20220530191342.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
diff --git a/.history/styles/globals_20220530191345.scss b/.history/styles/globals_20220530191345.scss
deleted file mode 100644
index f090305..0000000
--- a/.history/styles/globals_20220530191345.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/UX/PictureText.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191354.scss b/.history/styles/globals_20220530191354.scss
deleted file mode 100644
index 15f02f3..0000000
--- a/.history/styles/globals_20220530191354.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191355.scss b/.history/styles/globals_20220530191355.scss
deleted file mode 100644
index 947e673..0000000
--- a/.history/styles/globals_20220530191355.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components//';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191359.scss b/.history/styles/globals_20220530191359.scss
deleted file mode 100644
index c396c1c..0000000
--- a/.history/styles/globals_20220530191359.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components//container/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530191400.scss b/.history/styles/globals_20220530191400.scss
deleted file mode 100644
index 3fba804..0000000
--- a/.history/styles/globals_20220530191400.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components//container/ContainerTitle.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193410.scss b/.history/styles/globals_20220530193410.scss
deleted file mode 100644
index 03e3c9f..0000000
--- a/.history/styles/globals_20220530193410.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193413.scss b/.history/styles/globals_20220530193413.scss
deleted file mode 100644
index 34b8e16..0000000
--- a/.history/styles/globals_20220530193413.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/container/ContainerTitle.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193420.scss b/.history/styles/globals_20220530193420.scss
deleted file mode 100644
index defa6cd..0000000
--- a/.history/styles/globals_20220530193420.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193425.scss b/.history/styles/globals_20220530193425.scss
deleted file mode 100644
index 784ebdf..0000000
--- a/.history/styles/globals_20220530193425.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193426.scss b/.history/styles/globals_20220530193426.scss
deleted file mode 100644
index 784ebdf..0000000
--- a/.history/styles/globals_20220530193426.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193427.scss b/.history/styles/globals_20220530193427.scss
deleted file mode 100644
index 9044725..0000000
--- a/.history/styles/globals_20220530193427.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193428.scss b/.history/styles/globals_20220530193428.scss
deleted file mode 100644
index 9044725..0000000
--- a/.history/styles/globals_20220530193428.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193453.scss b/.history/styles/globals_20220530193453.scss
deleted file mode 100644
index f255a58..0000000
--- a/.history/styles/globals_20220530193453.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
diff --git a/.history/styles/globals_20220530193459.scss b/.history/styles/globals_20220530193459.scss
deleted file mode 100644
index d248d54..0000000
--- a/.history/styles/globals_20220530193459.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193502.scss b/.history/styles/globals_20220530193502.scss
deleted file mode 100644
index f469118..0000000
--- a/.history/styles/globals_20220530193502.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components//block/';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193504.scss b/.history/styles/globals_20220530193504.scss
deleted file mode 100644
index 1d8ace8..0000000
--- a/.history/styles/globals_20220530193504.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components//block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220530193506.scss b/.history/styles/globals_20220530193506.scss
deleted file mode 100644
index e9f728f..0000000
--- a/.history/styles/globals_20220530193506.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135843.scss b/.history/styles/globals_20220531135843.scss
deleted file mode 100644
index 8c2a7d1..0000000
--- a/.history/styles/globals_20220531135843.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135848.scss b/.history/styles/globals_20220531135848.scss
deleted file mode 100644
index 43bcacc..0000000
--- a/.history/styles/globals_20220531135848.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  src: url('../');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135853.scss b/.history/styles/globals_20220531135853.scss
deleted file mode 100644
index 0802015..0000000
--- a/.history/styles/globals_20220531135853.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  src: url('../public/');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135855.scss b/.history/styles/globals_20220531135855.scss
deleted file mode 100644
index f8ec912..0000000
--- a/.history/styles/globals_20220531135855.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  src: url('../public/assets/');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135856.scss b/.history/styles/globals_20220531135856.scss
deleted file mode 100644
index 6dbf47a..0000000
--- a/.history/styles/globals_20220531135856.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135903.scss b/.history/styles/globals_20220531135903.scss
deleted file mode 100644
index 8c2a7d1..0000000
--- a/.history/styles/globals_20220531135903.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135907.scss b/.history/styles/globals_20220531135907.scss
deleted file mode 100644
index e9f728f..0000000
--- a/.history/styles/globals_20220531135907.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@font-face {
-  font-family: 'Rubik';
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135951.scss b/.history/styles/globals_20220531135951.scss
deleted file mode 100644
index aeb317a..0000000
--- a/.history/styles/globals_20220531135951.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@font-face {
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135953.scss b/.history/styles/globals_20220531135953.scss
deleted file mode 100644
index 11dea81..0000000
--- a/.history/styles/globals_20220531135953.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@font-face {
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-  font-family: 'Rubik';
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531135954.scss b/.history/styles/globals_20220531135954.scss
deleted file mode 100644
index 11dea81..0000000
--- a/.history/styles/globals_20220531135954.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@font-face {
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-  font-family: 'Rubik';
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220531161410.scss b/.history/styles/globals_20220531161410.scss
deleted file mode 100644
index 4c28713..0000000
--- a/.history/styles/globals_20220531161410.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@font-face {
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-  font-family: 'Rubik';
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
diff --git a/.history/styles/globals_20220531161417.scss b/.history/styles/globals_20220531161417.scss
deleted file mode 100644
index 043e987..0000000
--- a/.history/styles/globals_20220531161417.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@font-face {
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-  font-family: 'Rubik';
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
-@import './components//'
\ No newline at end of file
diff --git a/.history/styles/globals_20220531161420.scss b/.history/styles/globals_20220531161420.scss
deleted file mode 100644
index 5e8ae70..0000000
--- a/.history/styles/globals_20220531161420.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@font-face {
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-  font-family: 'Rubik';
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
-@import './components/block/'
\ No newline at end of file
diff --git a/.history/styles/globals_20220531161423.scss b/.history/styles/globals_20220531161423.scss
deleted file mode 100644
index fdc506e..0000000
--- a/.history/styles/globals_20220531161423.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@font-face {
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-  font-family: 'Rubik';
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
-@import './components/block/DeliveryArea.scss'
\ No newline at end of file
diff --git a/.history/styles/globals_20220603175555.scss b/.history/styles/globals_20220603175555.scss
deleted file mode 100644
index 113359e..0000000
--- a/.history/styles/globals_20220603175555.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@font-face {
-  src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf');
-  src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf');
-  font-weight: 400;
-  font-style: normal;
-  font-family: 'Rubik';
-}
-
-@import './libs/ResetCss.scss';
-@import './components/block/Stock.scss';
-@import './components/Container.scss';
-@import './components/Header.scss';
-@import './components/Login.scss';
-@import './components/UX/Input.scss';
-@import './components/UX/Button.scss';
-@import './components/block/Motto.scss';
-@import './components/block/Categories.scss';
-@import './components/Box.scss';
-@import './components/block/Pizza.scss';
-@import './components/UX/ButtonImg.scss';
-@import './components/UX/PictureText.scss';
-@import './components/container/ContainerTitle.scss';
-@import './components/block/Footer.scss';
-@import './components/block/FooterNav.scss';
-@import './components/block/DeliveryArea.scss';
-@import './components/UX/Modal.scss';
-@import './components/block/PizzaCard.scss';
\ No newline at end of file
diff --git a/.history/styles/globals_20220603174318.scss b/.history/styles/globals_20220712213446.scss
similarity index 79%
rename from .history/styles/globals_20220603174318.scss
rename to .history/styles/globals_20220712213446.scss
index 879eedb..06739dd 100644
--- a/.history/styles/globals_20220603174318.scss
+++ b/.history/styles/globals_20220712213446.scss
@@ -16,11 +16,12 @@
 @import './components/block/Motto.scss';
 @import './components/block/Categories.scss';
 @import './components/Box.scss';
-@import './components/block/Pizza.scss';
 @import './components/UX/ButtonImg.scss';
 @import './components/UX/PictureText.scss';
 @import './components/container/ContainerTitle.scss';
 @import './components/block/Footer.scss';
 @import './components/block/FooterNav.scss';
 @import './components/block/DeliveryArea.scss';
-@import './components/UX/Modal.scss';
\ No newline at end of file
+@import '../components/customer/pages/index/block/Pizza/styles/index.scss';
+@import '../components/customer/pages/index/modals/pizza/styles/index.scss';
+@import '../components/customer/pages/index/modals/cart/styles/index.scss';
diff --git a/README.md b/README.md
index cc696de..89e1462 100644
--- a/README.md
+++ b/README.md
@@ -9,4 +9,8 @@
 ### Изменения 11.07.22
 1. Изменил размеры модального окна с карточкой пиццы под разные расширения экрана.
 2. Изменил внутренни размеры компонентов модального окна, что бы все помещались.
-3. Убрал появление синего цвета при нажатии.
\ No newline at end of file
+3. Убрал появление синего цвета при нажатии.
+
+### Изменения 12.07.22
+1. Изменил расположение нижней панели карточки пиццы.
+2. Перенастроил корзину. Но пака не доделал новый дизайн карточки продукта.
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/cart/content.tsx b/components/customer/pages/index/modals/cart/content.tsx
index dca7719..957269b 100644
--- a/components/customer/pages/index/modals/cart/content.tsx
+++ b/components/customer/pages/index/modals/cart/content.tsx
@@ -80,16 +80,16 @@ export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
         </div>
         <div className='basket_footer'>
             <div className='promo_code_box'>
-                <input className='promo_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
-                <button className='promo_button' type="submit">Применить</button>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='button' type="submit">Применить</button>
             </div>
             <div className='check'>
-                <div className='check_box'>
-                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
+                <div className='box'>
+                    <p >Доставка </p> <p className='text'>{delivery} ₽</p>
                 </div>
-                <div className='check_box'>
+                <div className='box'>
                     <p >{quantityGoods} товар(а) </p>
-                    <p className='check_text'>{sum} ₽</p>
+                    <p className='text'>{sum} ₽</p>
                 </div>
             </div>
             <Button styles={'yellow button_size_48'}
diff --git a/components/customer/pages/index/modals/cart/pizzaCart.tsx b/components/customer/pages/index/modals/cart/pizzaCart.tsx
index 1e114fc..7a2fa82 100644
--- a/components/customer/pages/index/modals/cart/pizzaCart.tsx
+++ b/components/customer/pages/index/modals/cart/pizzaCart.tsx
@@ -23,10 +23,12 @@ export const PizzaCart: React.FC<Props> = ({id}) => {
   //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);
 
   return (
-    <Modal styles={'cart'} position={''}>
-      {
-        <PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />
-      }
-    </Modal>
+    <div id='openModal' className='pizza_modal_cart'>
+      <div className='dialog'>
+        <div className='content'>
+            {<PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />}
+        </div>
+      </div>
+    </div>
   );
 };
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/cart/styles/index.scss b/components/customer/pages/index/modals/cart/styles/index.scss
new file mode 100644
index 0000000..825b1c3
--- /dev/null
+++ b/components/customer/pages/index/modals/cart/styles/index.scss
@@ -0,0 +1,136 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 45%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border: 1px solid #8E8E93;
+                    border-radius: 10px;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        padding: 0px 20px 0 20px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/cart/styles/product_box.scss b/components/customer/pages/index/modals/cart/styles/product_box.scss
new file mode 100644
index 0000000..4432e5f
--- /dev/null
+++ b/components/customer/pages/index/modals/cart/styles/product_box.scss
@@ -0,0 +1,53 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+}
+
+.card_basket_product_img{
+    margin: 10px;
+}
+
+.card_basket_product_box_title{
+    margin: 10px;
+}
+
+.card_basket_product_title{
+   /* font-size: 20px; */
+    line-height: 24px;
+}
+
+.card_basket_product_size{
+    font-weight: 400;
+    font-size: 16px;
+    background: #FED11E;
+    border-radius: 8px;
+    width: 60px;
+    padding: 5px;
+    text-align: center;
+}
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/components/customer/pages/index/modals/pizza/styles/_ingredients.scss b/components/customer/pages/index/modals/pizza/styles/_ingredients.scss
index 3d4ce63..9c84b41 100644
--- a/components/customer/pages/index/modals/pizza/styles/_ingredients.scss
+++ b/components/customer/pages/index/modals/pizza/styles/_ingredients.scss
@@ -3,7 +3,14 @@ $color_none: #dad9d8;
 
 .ingredients{
     text-align: center;
-    height: 180px;
+    @media (max-width:760px) {
+        height: 200px;
+    }
+
+    @media (min-width:780px) {
+        height: 220px;
+    }
+
     overflow-y: scroll;
     margin-left: 10px;
 
diff --git a/old b/old
new file mode 100644
index 0000000..051cc41
--- /dev/null
+++ b/old
@@ -0,0 +1,112 @@
+.modal_header{
+    height: 450px;
+}
+
+.position_basket{
+    padding-top: 80px;
+    position: absolute;
+    right: 0;
+}
+
+.pizza_modal_cart{
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    
+    .dialog {
+        @media (max-width:760px) {
+            height: 533px;
+            width: 400px;
+            margin: 0 auto;
+        }
+  
+        @media (min-width:780px) {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            height: 533px;
+            width: 900px;
+            -webkit-transform: translate(-50%, -50%);
+            -moz-transform: translate(-50%, -50%);
+            -ms-transform: translate(-50%, -50%);
+            -o-transform: translate(-50%, -50%);
+        }
+  
+          /* Modal Content */
+        .content {
+          background-color: #fefefe;
+          margin: auto;
+          @media (max-width:760px) {
+  
+          }
+          @media (min-width:780px) {
+            border-radius: 20px;
+          }
+          /*border: 1px solid #888;*/
+          .body{
+            height: 100%;
+            flex-wrap: wrap;
+            display: flex;
+          }
+        }
+    }
+
+    height: 100vh;
+    min-height: 600px;
+    width: 430px;
+    position: absolute;
+    right: 0;
+    left: unset !important;
+    background-color: #F7F7F7;
+
+    .body_left{
+        margin: 0 auto;
+        float: left;
+        position: static;
+        display: flex;
+        justify-content: center; /*Центрирование по горизонтали*/
+        align-items: center;     /*Центрирование по вертикали */
+        width: 400px;
+    }
+
+    .body_right{
+        background: #F7F7F7;
+        width: 450px;
+        display: table;
+        float: left;
+        position: static;
+    }
+
+
+   
+
+
+
+
+
+   
+
+    
+
+    
+
+   
+
+   
+
+ 
+
+    
+   
+
+
+
+    
+}
diff --git a/styles/globals.scss b/styles/globals.scss
index f915365..06739dd 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -24,5 +24,4 @@
 @import './components/block/DeliveryArea.scss';
 @import '../components/customer/pages/index/block/Pizza/styles/index.scss';
 @import '../components/customer/pages/index/modals/pizza/styles/index.scss';
-@import './components/block/Cart.scss';
-@import './components/block/CardBasketProduct.scss';
\ No newline at end of file
+@import '../components/customer/pages/index/modals/cart/styles/index.scss';