From 4d1f31afe3eb47bf335fbb72d69bb7caf9dd0781 Mon Sep 17 00:00:00 2001
From: Divlo <contact@divlo.fr>
Date: Thu, 19 Mar 2020 16:36:43 +0100
Subject: [PATCH] =?UTF-8?q?frontend:=20Mise=20=C3=A0=20jour=20grid.css=20p?=
 =?UTF-8?q?our=20FunctionCard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FunctionCard/FunctionCard.css  |   6 +-
 .../components/FunctionCard/FunctionCard.js   |   2 +-
 frontend/pages/functions.js                   |   5 +-
 frontend/public/css/grid.css                  | 808 +++++++-----------
 frontend/public/images/functions/grid.css     | 531 ------------
 5 files changed, 331 insertions(+), 1021 deletions(-)
 delete mode 100644 frontend/public/images/functions/grid.css

diff --git a/frontend/components/FunctionCard/FunctionCard.css b/frontend/components/FunctionCard/FunctionCard.css
index 68fe118..63c6d9d 100644
--- a/frontend/components/FunctionCard/FunctionCard.css
+++ b/frontend/components/FunctionCard/FunctionCard.css
@@ -7,7 +7,7 @@
     box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25);
     border: 1px solid black;
     border-radius: 1rem;
-    margin: 0 0 40px 0;
+    margin: 0 0 50px 0;
     cursor: pointer;
     transition: all .3s;
 }
@@ -17,13 +17,13 @@
 /* col-md */
 @media (min-width: 768px) {
     .FunctionCard {
-        margin: 0 30px 40px 30px;
+        margin: 0 30px 50px 30px;
     } 
 }
 /* col-xl */
 @media (min-width: 1200px) {
     .FunctionCard {
-        margin: 0 13px 40px 13px;
+        margin: 0 20px 50px 20px;
     }   
 }
 
diff --git a/frontend/components/FunctionCard/FunctionCard.js b/frontend/components/FunctionCard/FunctionCard.js
index ebbe850..564e896 100644
--- a/frontend/components/FunctionCard/FunctionCard.js
+++ b/frontend/components/FunctionCard/FunctionCard.js
@@ -3,7 +3,7 @@ import './FunctionCard.css';
 
 const FunctionCard = (props) =>  (
     <Link href={`/functions/${props.slug}`}>
-        <div className="FunctionCard col-sm-16 col-md-7 col-xl-5">
+        <div className="FunctionCard col-sm-24 col-md-10 col-xl-7">
             <img className="FunctionCard__image" alt={props.title} src={props.image} />
             <h2 className="FunctionCard__title">{props.title}</h2>
             <p className="FunctionCard__description">{props.description}</p>
diff --git a/frontend/pages/functions.js b/frontend/pages/functions.js
index ba4eacc..e3d1545 100644
--- a/frontend/pages/functions.js
+++ b/frontend/pages/functions.js
@@ -11,11 +11,10 @@ const Functions = () => (
             image="/images/FunctionProject_icon_small.png" 
         />
         
-        <div className="container-fluid text-center">
-
+        <div className="container text-center">
 
             <div className="row justify-content-center">
-                <div className="col-16">
+                <div className="col-24">
                     <h1 className="Functions__title">Fonctions</h1>
                 </div>
             </div>
diff --git a/frontend/public/css/grid.css b/frontend/public/css/grid.css
index 13769d7..8fcd613 100644
--- a/frontend/public/css/grid.css
+++ b/frontend/public/css/grid.css
@@ -1,6 +1,6 @@
 /*!
 * Bootstrap Grid v4.4.1 (https://getbootstrap.com/)
-* Edited by Divlo (col, col-sm, col-md, col-lg, col-xl) and 16 columns
+* Edited by Divlo (col, col-sm, col-md, col-lg, col-xl) and 24 columns (no offsets)
 */
 
 *,
@@ -62,692 +62,534 @@
     margin-left: -15px;
 }
 
-.col-1,
-.col-2,
-.col-3,
-.col-4,
-.col-5,
-.col-6,
-.col-7,
-.col-8,
-.col-9,
-.col-10,
-.col-11,
-.col-12,
-.col-13,
-.col-14,
-.col-15,
-.col-16,
-.col-sm-1,
-.col-sm-2,
-.col-sm-3,
-.col-sm-4,
-.col-sm-5,
-.col-sm-6,
-.col-sm-7,
-.col-sm-8,
-.col-sm-9,
-.col-sm-10,
-.col-sm-11,
-.col-sm-12,
-.col-sm-13,
-.col-sm-14,
-.col-sm-15,
-.col-sm-16,
-.col-md-1,
-.col-md-2,
-.col-md-3,
-.col-md-4,
-.col-md-5,
-.col-md-6,
-.col-md-7,
-.col-md-8,
-.col-md-9,
-.col-md-10,
-.col-md-11,
-.col-md-12,
-.col-md-13,
-.col-md-14,
-.col-md-15,
-.col-md-16,
-.col-lg-1,
-.col-lg-2,
-.col-lg-3,
-.col-lg-4,
-.col-lg-5,
-.col-lg-6,
-.col-lg-7,
-.col-lg-8,
-.col-lg-9,
-.col-lg-10,
-.col-lg-11,
-.col-lg-12,
-.col-lg-13,
-.col-lg-14,
-.col-lg-15,
-.col-lg-16,
-.col-xl-1,
-.col-xl-2,
-.col-xl-3,
-.col-xl-4,
-.col-xl-5,
-.col-xl-6,
-.col-xl-7,
-.col-xl-8,
-.col-xl-9,
-.col-xl-10,
-.col-xl-11,
-.col-xl-12,
-.col-xl-13,
-.col-xl-14,
-.col-xl-15,
-.col-xl-16 {
+.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-13, .col-14, .col-15, .col-16, .col-17, .col-18, .col-19, .col-20, .col-21, .col-22, .col-23, .col-24,
+.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-13, .col-sm-14, .col-sm-15, .col-sm-16, .col-sm-17, .col-sm-18, .col-sm-19, .col-sm-20, .col-sm-21, .col-sm-22, .col-sm-23, .col-sm-24,
+.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-13, .col-md-14, .col-md-15, .col-md-16, .col-md-17, .col-md-18, .col-md-19, .col-md-20, .col-md-21, .col-md-22, .col-md-23, .col-md-24,
+.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-13, .col-lg-14, .col-lg-15, .col-lg-16, .col-lg-17, .col-lg-18, .col-lg-19, .col-lg-20, .col-lg-21, .col-lg-22, .col-lg-23, .col-lg-24,
+.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-13, .col-xl-14, .col-xl-15, .col-xl-16, .col-xl-17, .col-xl-18, .col-xl-19, .col-xl-20, .col-xl-21, .col-xl-22, .col-xl-23, .col-xl-24 {
     position: relative;
     width: 100%;
     padding-right: 15px;
-    padding-left: 15px;
+    padding-left: 15px; 
 }
 
 /* col- */
 .col-1 {
-    flex: 0 0 6.25%;
-    max-width: 6.25%;
+    flex: 0 0 4.16667%;
+    max-width: 4.16667%;
 }
 
 .col-2 {
+    flex: 0 0 8.33333%;
+    max-width: 8.33333%;
+}
+
+.col-3 {
     flex: 0 0 12.5%;
     max-width: 12.5%;
 }
 
-.col-3 {
-    flex: 0 0 18.75%;
-    max-width: 18.75%;
+.col-4 {
+    flex: 0 0 16.66667%;
+    max-width: 16.66667%;
 }
 
-.col-4 {
+.col-5 {
+    flex: 0 0 20.83333%;
+    max-width: 20.83333%;
+}
+
+.col-6 {
     flex: 0 0 25%;
     max-width: 25%;
 }
 
-.col-5 {
-    flex: 0 0 31.25%;
-    max-width: 31.25%;
+.col-7 {
+    flex: 0 0 29.16667%;
+    max-width: 29.16667%;
 }
 
-.col-6 {
+.col-8 {
+    flex: 0 0 33.33333%;
+    max-width: 33.33333%;
+}
+
+.col-9 {
     flex: 0 0 37.5%;
     max-width: 37.5%;
 }
 
-.col-7 {
-    flex: 0 0 43.75%;
-    max-width: 43.75%;
+.col-10 {
+    flex: 0 0 41.66667%;
+    max-width: 41.66667%;
 }
 
-.col-8 {
+.col-11 {
+    flex: 0 0 45.83333%;
+    max-width: 45.83333%;
+}
+
+.col-12 {
     flex: 0 0 50%;
     max-width: 50%;
 }
 
-.col-9 {
-    flex: 0 0 56.25%;
-    max-width: 56.25%;
+.col-13 {
+    flex: 0 0 54.16667%;
+    max-width: 54.16667%;
 }
 
-.col-10 {
+.col-14 {
+    flex: 0 0 58.33333%;
+    max-width: 58.33333%;
+}
+
+.col-15 {
     flex: 0 0 62.5%;
     max-width: 62.5%;
 }
 
-.col-11 {
-    flex: 0 0 68.75%;
-    max-width: 68.75%;
+.col-16 {
+    flex: 0 0 66.66667%;
+    max-width: 66.66667%;
 }
 
-.col-12 {
+.col-17 {
+    flex: 0 0 70.83333%;
+    max-width: 70.83333%;
+}
+
+.col-18 {
     flex: 0 0 75%;
     max-width: 75%;
 }
 
-.col-13 {
-    flex: 0 0 81.25%;
-    max-width: 81.25%;
+.col-19 {
+    flex: 0 0 79.16667%;
+    max-width: 79.16667%;
 }
 
-.col-14 {
+.col-20 {
+    flex: 0 0 83.33333%;
+    max-width: 83.33333%;
+}
+
+.col-21 {
     flex: 0 0 87.5%;
     max-width: 87.5%;
 }
 
-.col-15 {
-    flex: 0 0 93.75%;
-    max-width: 93.75%;
+.col-22 {
+    flex: 0 0 91.66667%;
+    max-width: 91.66667%;
 }
 
-.col-16 {
+.col-23 {
+    flex: 0 0 95.83333%;
+    max-width: 95.83333%;
+}
+
+.col-24 {
     flex: 0 0 100%;
     max-width: 100%;
 }
-.offset-1 {
-    margin-left: 6.25%;
-}
-
-.offset-2 {
-    margin-left: 12.5%;
-}
-
-.offset-3 {
-    margin-left: 18.75%;
-}
-
-.offset-4 {
-    margin-left: 25%;
-}
-
-.offset-5 {
-    margin-left: 31.25%;
-}
-
-.offset-6 {
-    margin-left: 37.5%;
-}
-
-.offset-7 {
-    margin-left: 43.75%;
-}
-
-.offset-8 {
-    margin-left: 50%;
-}
-
-.offset-9 {
-    margin-left: 56.25%;
-}
-
-.offset-10 {
-    margin-left: 62.5%;
-}
-
-.offset-11 {
-    margin-left: 68.75%;
-}
-
-.offset-12 {
-    margin-left: 75%;
-}
-
-.offset-13 {
-    margin-left: 81.25%;
-}
-
-.offset-14 {
-    margin-left: 87.5%;
-}
-
-.offset-15 {
-    margin-left: 93.75%;
-}
 
 /* col-sm */
 @media (min-width: 576px) {
     .col-sm-1 {
-        flex: 0 0 6.25%;
-        max-width: 6.25%;
+        flex: 0 0 4.16667%;
+        max-width: 4.16667%;
     }
     .col-sm-2 {
+        flex: 0 0 8.33333%;
+        max-width: 8.33333%;
+    }
+    .col-sm-3 {
         flex: 0 0 12.5%;
         max-width: 12.5%;
     }
-    .col-sm-3 {
-        flex: 0 0 18.75%;
-        max-width: 18.75%;
-    }
     .col-sm-4 {
+        flex: 0 0 16.66667%;
+        max-width: 16.66667%;
+    }
+    .col-sm-5 {
+        flex: 0 0 20.83333%;
+        max-width: 20.83333%;
+    }
+    .col-sm-6 {
         flex: 0 0 25%;
         max-width: 25%;
     }
-    .col-sm-5 {
-        flex: 0 0 31.25%;
-        max-width: 31.25%;
+    .col-sm-7 {
+        flex: 0 0 29.16667%;
+        max-width: 29.16667%;
     }
-    .col-sm-6 {
+    .col-sm-8 {
+        flex: 0 0 33.33333%;
+        max-width: 33.33333%;
+    }
+    .col-sm-9 {
         flex: 0 0 37.5%;
         max-width: 37.5%;
     }
-    .col-sm-7 {
-        flex: 0 0 43.75%;
-        max-width: 43.75%;
+    .col-sm-10 {
+        flex: 0 0 41.66667%;
+        max-width: 41.66667%;
     }
-    .col-sm-8 {
+    .col-sm-11 {
+        flex: 0 0 45.83333%;
+        max-width: 45.83333%;
+    }
+    .col-sm-12 {
         flex: 0 0 50%;
         max-width: 50%;
     }
-    .col-sm-9 {
-        flex: 0 0 56.25%;
-        max-width: 56.25%;
+    .col-sm-13 {
+        flex: 0 0 54.16667%;
+        max-width: 54.16667%;
     }
-    .col-sm-10 {
+    .col-sm-14 {
+        flex: 0 0 58.33333%;
+        max-width: 58.33333%;
+    }
+    .col-sm-15 {
         flex: 0 0 62.5%;
         max-width: 62.5%;
     }
-    .col-sm-11 {
-        flex: 0 0 68.75%;
-        max-width: 68.75%;
+    .col-sm-16 {
+        flex: 0 0 66.66667%;
+        max-width: 66.66667%;
     }
-    .col-sm-12 {
+    .col-sm-17 {
+        flex: 0 0 70.83333%;
+        max-width: 70.83333%;
+    }
+    .col-sm-18 {
         flex: 0 0 75%;
         max-width: 75%;
     }
-    .col-sm-13 {
-        flex: 0 0 81.25%;
-        max-width: 81.25%;
+    .col-sm-19 {
+        flex: 0 0 79.16667%;
+        max-width: 79.16667%;
     }
-    .col-sm-14 {
+    .col-sm-20 {
+        flex: 0 0 83.33333%;
+        max-width: 83.33333%;
+    }
+    .col-sm-21 {
         flex: 0 0 87.5%;
         max-width: 87.5%;
     }
-    .col-sm-15 {
-        flex: 0 0 93.75%;
-        max-width: 93.75%;
+    .col-sm-22 {
+        flex: 0 0 91.66667%;
+        max-width: 91.66667%;
     }
-    .col-sm-16 {
+    .col-sm-23 {
+        flex: 0 0 95.83333%;
+        max-width: 95.83333%;
+    }
+    .col-sm-24 {
         flex: 0 0 100%;
         max-width: 100%;
     }
-    .offset-sm-0 {
-        margin-left: 0;
-    }
-    .offset-sm-1 {
-        margin-left: 6.25%;
-    }
-    .offset-sm-2 {
-        margin-left: 12.5%;
-    }
-    .offset-sm-3 {
-        margin-left: 18.75%;
-    }
-    .offset-sm-4 {
-        margin-left: 25%;
-    }
-    .offset-sm-5 {
-        margin-left: 31.25%;
-    }
-    .offset-sm-6 {
-        margin-left: 37.5%;
-    }
-    .offset-sm-7 {
-        margin-left: 43.75%;
-    }
-    .offset-sm-8 {
-        margin-left: 50%;
-    }
-    .offset-sm-9 {
-        margin-left: 56.25%;
-    }
-    .offset-sm-10 {
-        margin-left: 62.5%;
-    }
-    .offset-sm-11 {
-        margin-left: 68.75%;
-    }
-    .offset-sm-12 {
-        margin-left: 75%;
-    }
-    .offset-sm-13 {
-        margin-left: 81.25%;
-    }
-    .offset-sm-14 {
-        margin-left: 87.5%;
-    }
-    .offset-sm-15 {
-        margin-left: 93.75%;
-    }
 }
 
 /* col-md */
 @media (min-width: 768px) {
     .col-md-1 {
-        flex: 0 0 6.25%;
-        max-width: 6.25%;
+        flex: 0 0 4.16667%;
+        max-width: 4.16667%;
     }
     .col-md-2 {
+        flex: 0 0 8.33333%;
+        max-width: 8.33333%;
+    }
+    .col-md-3 {
         flex: 0 0 12.5%;
         max-width: 12.5%;
     }
-    .col-md-3 {
-        flex: 0 0 18.75%;
-        max-width: 18.75%;
-    }
     .col-md-4 {
+        flex: 0 0 16.66667%;
+        max-width: 16.66667%;
+    }
+    .col-md-5 {
+        flex: 0 0 20.83333%;
+        max-width: 20.83333%;
+    }
+    .col-md-6 {
         flex: 0 0 25%;
         max-width: 25%;
     }
-    .col-md-5 {
-        flex: 0 0 31.25%;
-        max-width: 31.25%;
+    .col-md-7 {
+        flex: 0 0 29.16667%;
+        max-width: 29.16667%;
     }
-    .col-md-6 {
+    .col-md-8 {
+        flex: 0 0 33.33333%;
+        max-width: 33.33333%;
+    }
+    .col-md-9 {
         flex: 0 0 37.5%;
         max-width: 37.5%;
     }
-    .col-md-7 {
-        flex: 0 0 43.75%;
-        max-width: 43.75%;
+    .col-md-10 {
+        flex: 0 0 41.66667%;
+        max-width: 41.66667%;
     }
-    .col-md-8 {
+    .col-md-11 {
+        flex: 0 0 45.83333%;
+        max-width: 45.83333%;
+    }
+    .col-md-12 {
         flex: 0 0 50%;
         max-width: 50%;
     }
-    .col-md-9 {
-        flex: 0 0 56.25%;
-        max-width: 56.25%;
+    .col-md-13 {
+        flex: 0 0 54.16667%;
+        max-width: 54.16667%;
     }
-    .col-md-10 {
+    .col-md-14 {
+        flex: 0 0 58.33333%;
+        max-width: 58.33333%;
+    }
+    .col-md-15 {
         flex: 0 0 62.5%;
         max-width: 62.5%;
     }
-    .col-md-11 {
-        flex: 0 0 68.75%;
-        max-width: 68.75%;
+    .col-md-16 {
+        flex: 0 0 66.66667%;
+        max-width: 66.66667%;
     }
-    .col-md-12 {
+    .col-md-17 {
+        flex: 0 0 70.83333%;
+        max-width: 70.83333%;
+    }
+    .col-md-18 {
         flex: 0 0 75%;
         max-width: 75%;
     }
-    .col-md-13 {
-        flex: 0 0 81.25%;
-        max-width: 81.25%;
+    .col-md-19 {
+        flex: 0 0 79.16667%;
+        max-width: 79.16667%;
     }
-    .col-md-14 {
+    .col-md-20 {
+        flex: 0 0 83.33333%;
+        max-width: 83.33333%;
+    }
+    .col-md-21 {
         flex: 0 0 87.5%;
         max-width: 87.5%;
     }
-    .col-md-15 {
-        flex: 0 0 93.75%;
-        max-width: 93.75%;
+    .col-md-22 {
+        flex: 0 0 91.66667%;
+        max-width: 91.66667%;
     }
-    .col-md-16 {
+    .col-md-23 {
+        flex: 0 0 95.83333%;
+        max-width: 95.83333%;
+    }
+    .col-md-24 {
         flex: 0 0 100%;
         max-width: 100%;
     }
-    .offset-md-0 {
-        margin-left: 0;
-    }
-    .offset-md-1 {
-        margin-left: 6.25%;
-    }
-    .offset-md-2 {
-        margin-left: 12.5%;
-    }
-    .offset-md-3 {
-        margin-left: 18.75%;
-    }
-    .offset-md-4 {
-        margin-left: 25%;
-    }
-    .offset-md-5 {
-        margin-left: 31.25%;
-    }
-    .offset-md-6 {
-        margin-left: 37.5%;
-    }
-    .offset-md-7 {
-        margin-left: 43.75%;
-    }
-    .offset-md-8 {
-        margin-left: 50%;
-    }
-    .offset-md-9 {
-        margin-left: 56.25%;
-    }
-    .offset-md-10 {
-        margin-left: 62.5%;
-    }
-    .offset-md-11 {
-        margin-left: 68.75%;
-    }
-    .offset-md-12 {
-        margin-left: 75%;
-    }
-    .offset-md-13 {
-        margin-left: 81.25%;
-    }
-    .offset-md-14 {
-        margin-left: 87.5%;
-    }
-    .offset-md-15 {
-        margin-left: 93.75%;
-    }
 }
 
 /* col-lg */
 @media (min-width: 992px) {
     .col-lg-1 {
-        flex: 0 0 6.25%;
-        max-width: 6.25%;
+        flex: 0 0 4.16667%;
+        max-width: 4.16667%;
     }
     .col-lg-2 {
+        flex: 0 0 8.33333%;
+        max-width: 8.33333%;
+    }
+    .col-lg-3 {
         flex: 0 0 12.5%;
         max-width: 12.5%;
     }
-    .col-lg-3 {
-        flex: 0 0 18.75%;
-        max-width: 18.75%;
-    }
     .col-lg-4 {
+        flex: 0 0 16.66667%;
+        max-width: 16.66667%;
+    }
+    .col-lg-5 {
+        flex: 0 0 20.83333%;
+        max-width: 20.83333%;
+    }
+    .col-lg-6 {
         flex: 0 0 25%;
         max-width: 25%;
     }
-    .col-lg-5 {
-        flex: 0 0 31.25%;
-        max-width: 31.25%;
+    .col-lg-7 {
+        flex: 0 0 29.16667%;
+        max-width: 29.16667%;
     }
-    .col-lg-6 {
+    .col-lg-8 {
+        flex: 0 0 33.33333%;
+        max-width: 33.33333%;
+    }
+    .col-lg-9 {
         flex: 0 0 37.5%;
         max-width: 37.5%;
     }
-    .col-lg-7 {
-        flex: 0 0 43.75%;
-        max-width: 43.75%;
+    .col-lg-10 {
+        flex: 0 0 41.66667%;
+        max-width: 41.66667%;
     }
-    .col-lg-8 {
+    .col-lg-11 {
+        flex: 0 0 45.83333%;
+        max-width: 45.83333%;
+    }
+    .col-lg-12 {
         flex: 0 0 50%;
         max-width: 50%;
     }
-    .col-lg-9 {
-        flex: 0 0 56.25%;
-        max-width: 56.25%;
+    .col-lg-13 {
+        flex: 0 0 54.16667%;
+        max-width: 54.16667%;
     }
-    .col-lg-10 {
+    .col-lg-14 {
+        flex: 0 0 58.33333%;
+        max-width: 58.33333%;
+    }
+    .col-lg-15 {
         flex: 0 0 62.5%;
         max-width: 62.5%;
     }
-    .col-lg-11 {
-        flex: 0 0 68.75%;
-        max-width: 68.75%;
+    .col-lg-16 {
+        flex: 0 0 66.66667%;
+        max-width: 66.66667%;
     }
-    .col-lg-12 {
+    .col-lg-17 {
+        flex: 0 0 70.83333%;
+        max-width: 70.83333%;
+    }
+    .col-lg-18 {
         flex: 0 0 75%;
         max-width: 75%;
     }
-    .col-lg-13 {
-        flex: 0 0 81.25%;
-        max-width: 81.25%;
+    .col-lg-19 {
+        flex: 0 0 79.16667%;
+        max-width: 79.16667%;
     }
-    .col-lg-14 {
+    .col-lg-20 {
+        flex: 0 0 83.33333%;
+        max-width: 83.33333%;
+    }
+    .col-lg-21 {
         flex: 0 0 87.5%;
         max-width: 87.5%;
     }
-    .col-lg-15 {
-        flex: 0 0 93.75%;
-        max-width: 93.75%;
+    .col-lg-22 {
+        flex: 0 0 91.66667%;
+        max-width: 91.66667%;
     }
-    .col-lg-16 {
+    .col-lg-23 {
+        flex: 0 0 95.83333%;
+        max-width: 95.83333%;
+    }
+    .col-lg-24 {
         flex: 0 0 100%;
         max-width: 100%;
     }
-    .offset-lg-0 {
-        margin-left: 0;
-    }
-    .offset-lg-1 {
-        margin-left: 6.25%;
-    }
-    .offset-lg-2 {
-        margin-left: 12.5%;
-    }
-    .offset-lg-3 {
-        margin-left: 18.75%;
-    }
-    .offset-lg-4 {
-        margin-left: 25%;
-    }
-    .offset-lg-5 {
-        margin-left: 31.25%;
-    }
-    .offset-lg-6 {
-        margin-left: 37.5%;
-    }
-    .offset-lg-7 {
-        margin-left: 43.75%;
-    }
-    .offset-lg-8 {
-        margin-left: 50%;
-    }
-    .offset-lg-9 {
-        margin-left: 56.25%;
-    }
-    .offset-lg-10 {
-        margin-left: 62.5%;
-    }
-    .offset-lg-11 {
-        margin-left: 68.75%;
-    }
-    .offset-lg-12 {
-        margin-left: 75%;
-    }
-    .offset-lg-13 {
-        margin-left: 81.25%;
-    }
-    .offset-lg-14 {
-        margin-left: 87.5%;
-    }
-    .offset-lg-15 {
-        margin-left: 93.75%;
-    }
 }
 
 /* col-xl */
 @media (min-width: 1200px) {
     .col-xl-1 {
-        flex: 0 0 6.25%;
-        max-width: 6.25%;
+        flex: 0 0 4.16667%;
+        max-width: 4.16667%;
     }
     .col-xl-2 {
+        flex: 0 0 8.33333%;
+        max-width: 8.33333%;
+    }
+    .col-xl-3 {
         flex: 0 0 12.5%;
         max-width: 12.5%;
     }
-    .col-xl-3 {
-        flex: 0 0 18.75%;
-        max-width: 18.75%;
-    }
     .col-xl-4 {
+        flex: 0 0 16.66667%;
+        max-width: 16.66667%;
+    }
+    .col-xl-5 {
+        flex: 0 0 20.83333%;
+        max-width: 20.83333%;
+    }
+    .col-xl-6 {
         flex: 0 0 25%;
         max-width: 25%;
     }
-    .col-xl-5 {
-        flex: 0 0 31.25%;
-        max-width: 31.25%;
+    .col-xl-7 {
+        flex: 0 0 29.16667%;
+        max-width: 29.16667%;
     }
-    .col-xl-6 {
+    .col-xl-8 {
+        flex: 0 0 33.33333%;
+        max-width: 33.33333%;
+    }
+    .col-xl-9 {
         flex: 0 0 37.5%;
         max-width: 37.5%;
     }
-    .col-xl-7 {
-        flex: 0 0 43.75%;
-        max-width: 43.75%;
+    .col-xl-10 {
+        flex: 0 0 41.66667%;
+        max-width: 41.66667%;
     }
-    .col-xl-8 {
+    .col-xl-11 {
+        flex: 0 0 45.83333%;
+        max-width: 45.83333%;
+    }
+    .col-xl-12 {
         flex: 0 0 50%;
         max-width: 50%;
     }
-    .col-xl-9 {
-        flex: 0 0 56.25%;
-        max-width: 56.25%;
+    .col-xl-13 {
+        flex: 0 0 54.16667%;
+        max-width: 54.16667%;
     }
-    .col-xl-10 {
+    .col-xl-14 {
+        flex: 0 0 58.33333%;
+        max-width: 58.33333%;
+    }
+    .col-xl-15 {
         flex: 0 0 62.5%;
         max-width: 62.5%;
     }
-    .col-xl-11 {
-        flex: 0 0 68.75%;
-        max-width: 68.75%;
+    .col-xl-16 {
+        flex: 0 0 66.66667%;
+        max-width: 66.66667%;
     }
-    .col-xl-12 {
+    .col-xl-17 {
+        flex: 0 0 70.83333%;
+        max-width: 70.83333%;
+    }
+    .col-xl-18 {
         flex: 0 0 75%;
         max-width: 75%;
     }
-    .col-xl-13 {
-        flex: 0 0 81.25%;
-        max-width: 81.25%;
+    .col-xl-19 {
+        flex: 0 0 79.16667%;
+        max-width: 79.16667%;
     }
-    .col-xl-14 {
+    .col-xl-20 {
+        flex: 0 0 83.33333%;
+        max-width: 83.33333%;
+    }
+    .col-xl-21 {
         flex: 0 0 87.5%;
         max-width: 87.5%;
     }
-    .col-xl-15 {
-        flex: 0 0 93.75%;
-        max-width: 93.75%;
+    .col-xl-22 {
+        flex: 0 0 91.66667%;
+        max-width: 91.66667%;
     }
-    .col-xl-16 {
+    .col-xl-23 {
+        flex: 0 0 95.83333%;
+        max-width: 95.83333%;
+    }
+    .col-xl-24 {
         flex: 0 0 100%;
         max-width: 100%;
     }
-    .offset-xl-0 {
-        margin-left: 0;
-    }
-    .offset-xl-1 {
-        margin-left: 6.25%;
-    }
-    .offset-xl-2 {
-        margin-left: 12.5%;
-    }
-    .offset-xl-3 {
-        margin-left: 18.75%;
-    }
-    .offset-xl-4 {
-        margin-left: 25%;
-    }
-    .offset-xl-5 {
-        margin-left: 31.25%;
-    }
-    .offset-xl-6 {
-        margin-left: 37.5%;
-    }
-    .offset-xl-7 {
-        margin-left: 43.75%;
-    }
-    .offset-xl-8 {
-        margin-left: 50%;
-    }
-    .offset-xl-9 {
-        margin-left: 56.25%;
-    }
-    .offset-xl-10 {
-        margin-left: 62.5%;
-    }
-    .offset-xl-11 {
-        margin-left: 68.75%;
-    }
-    .offset-xl-12 {
-        margin-left: 75%;
-    }
-    .offset-xl-13 {
-        margin-left: 81.25%;
-    }
-    .offset-xl-14 {
-        margin-left: 87.5%;
-    }
-    .offset-xl-15 {
-        margin-left: 93.75%;
-    }
 }
\ No newline at end of file
diff --git a/frontend/public/images/functions/grid.css b/frontend/public/images/functions/grid.css
deleted file mode 100644
index 68a5ef3..0000000
--- a/frontend/public/images/functions/grid.css
+++ /dev/null
@@ -1,531 +0,0 @@
-/*!
- * Bootstrap Grid v4.4.1 (https://getbootstrap.com/)
- * Edited by Divlo (col, col-sm, col-md, col-lg, col-xl) and 16 columns
- */
-
- *,
- *::before,
- *::after {
-     box-sizing: border-box;
- }
-  
- .container {
-     width: 100%;
-     padding-right: 15px;
-     padding-left: 15px;
-     margin-right: auto;
-     margin-left: auto;
- }
-  
- .container-fluid {
-     width: 100%;
-     padding-right: 15px;
-     padding-left: 15px;
-     margin-right: auto;
-     margin-left: auto;
- }
-  
- @media (min-width: 576px) {
-     .container {
-         max-width: 540px;
-     }
- }
-  
- @media (max-width: 576px) {
-     .container {
-         width: 90%;
-     }
- }
-  
- @media (min-width: 768px) {
-     .container {
-         max-width: 720px;
-     }
- }
-  
- @media (min-width: 992px) {
-     .container {
-         max-width: 960px;
-     }
-  }
-  
- @media (min-width: 1200px) {
-     .container {
-         max-width: 1140px;
-     }
- }
-  
- .row {
-     display: flex;
-     flex-wrap: wrap;
-     margin-right: -15px;
-     margin-left: -15px;
- }
- 
- .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
- .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
- .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
- .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
- .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
-     position: relative;
-     width: 100%;
-     padding-right: 15px;
-     padding-left: 15px;
- }
-  
- /* col- */
- .col-1 {
-     flex: 0 0 8.33333%;
-     max-width: 8.33333%;
- }
- 
- .col-2 {
-     flex: 0 0 16.66667%;
-     max-width: 16.66667%;
- }
- 
- .col-3 {
-     flex: 0 0 25%;
-     max-width: 25%;
- }
- 
- .col-4 {
-     flex: 0 0 33.33333%;
-     max-width: 33.33333%;
- }
- 
- .col-5 {
-     flex: 0 0 41.66667%;
-     max-width: 41.66667%;
- }
- 
- .col-6 {
-     flex: 0 0 50%;
-     max-width: 50%;
- }
- 
- .col-7 {
-     flex: 0 0 58.33333%;
-     max-width: 58.33333%;
- }
- 
- .col-8 {
-     flex: 0 0 66.66667%;
-     max-width: 66.66667%;
- }
- 
- .col-9 {
-     flex: 0 0 75%;
-     max-width: 75%;
- }
- 
- .col-10 {
-     flex: 0 0 83.33333%;
-     max-width: 83.33333%;
- }
- 
- .col-11 {
-     flex: 0 0 91.66667%;
-     max-width: 91.66667%;
- }
- 
- .col-12 {
-     flex: 0 0 100%;
-     max-width: 100%;
- }
- 
- .offset-1 {
-     margin-left: 8.33333%;
- }
- 
- .offset-2 {
-     margin-left: 16.66667%;
- }
- 
- .offset-3 {
-     margin-left: 25%;
- }
- 
- .offset-4 {
-     margin-left: 33.33333%;
- }
- 
- .offset-5 {
-     margin-left: 41.66667%;
- }
- 
- .offset-6 {
-     margin-left: 50%;
- }
- 
- .offset-7 {
-     margin-left: 58.33333%;
- }
- 
- .offset-8 {
-     margin-left: 66.66667%;
- }
- 
- .offset-9 {
-     margin-left: 75%;
- }
- 
- .offset-10 {
-     margin-left: 83.33333%;
- }
- 
- .offset-11 {
-     margin-left: 91.66667%;
- }
-  
-  /* col-sm */
- @media (min-width: 576px) {
-     .col-sm-1 {
-         flex: 0 0 8.33333%;
-         max-width: 8.33333%;
-     }
-     .col-sm-2 {
-         flex: 0 0 16.66667%;
-         max-width: 16.66667%;
-     }
-     .col-sm-3 {
-         flex: 0 0 25%;
-         max-width: 25%;
-     }
-     .col-sm-4 {
-         flex: 0 0 33.33333%;
-         max-width: 33.33333%;
-     }
-     .col-sm-5 {
-         flex: 0 0 41.66667%;
-         max-width: 41.66667%;
-     }
-     .col-sm-6 {
-         flex: 0 0 50%;
-         max-width: 50%;
-     }
-     .col-sm-7 {
-         flex: 0 0 58.33333%;
-         max-width: 58.33333%;
-     }
-     .col-sm-8 {
-         flex: 0 0 66.66667%;
-         max-width: 66.66667%;
-     }
-     .col-sm-9 {
-         flex: 0 0 75%;
-         max-width: 75%;
-     }
-     .col-sm-10 {
-         flex: 0 0 83.33333%;
-         max-width: 83.33333%;
-     }
-     .col-sm-11 {
-         flex: 0 0 91.66667%;
-         max-width: 91.66667%;
-     }
-     .col-sm-12 {
-         flex: 0 0 100%;
-         max-width: 100%;
-     }
-     .offset-sm-0 {
-         margin-left: 0;
-     }
-     .offset-sm-1 {
-         margin-left: 8.33333%;
-     }
-     .offset-sm-2 {
-         margin-left: 16.66667%;
-     }
-     .offset-sm-3 {
-         margin-left: 25%;
-     }
-     .offset-sm-4 {
-         margin-left: 33.33333%;
-     }
-     .offset-sm-5 {
-         margin-left: 41.66667%;
-     }
-     .offset-sm-6 {
-         margin-left: 50%;
-     }
-     .offset-sm-7 {
-         margin-left: 58.33333%;
-     }
-     .offset-sm-8 {
-         margin-left: 66.66667%;
-     }
-     .offset-sm-9 {
-         margin-left: 75%;
-     }
-     .offset-sm-10 {
-         margin-left: 83.33333%;
-     }
-     .offset-sm-11 {
-         margin-left: 91.66667%;
-     }
- }
-  
-  /* col-md */
- @media (min-width: 768px) {
-     .col-md-1 {
-         flex: 0 0 8.33333%;
-         max-width: 8.33333%;
-     }
-     .col-md-2 {
-         flex: 0 0 16.66667%;
-         max-width: 16.66667%;
-     }
-     .col-md-3 {
-         flex: 0 0 25%;
-         max-width: 25%;
-     }
-     .col-md-4 {
-         flex: 0 0 33.33333%;
-         max-width: 33.33333%;
-     }
-     .col-md-5 {
-         flex: 0 0 41.66667%;
-         max-width: 41.66667%;
-     }
-     .col-md-6 {
-         flex: 0 0 50%;
-         max-width: 50%;
-     }
-     .col-md-7 {
-         flex: 0 0 58.33333%;
-         max-width: 58.33333%;
-     }
-     .col-md-8 {
-         flex: 0 0 66.66667%;
-         max-width: 66.66667%;
-     }
-     .col-md-9 {
-         flex: 0 0 75%;
-         max-width: 75%;
-     }
-     .col-md-10 {
-         flex: 0 0 83.33333%;
-         max-width: 83.33333%;
-     }
-     .col-md-11 {
-         flex: 0 0 91.66667%;
-         max-width: 91.66667%;
-     }
-     .col-md-12 {
-         flex: 0 0 100%;
-         max-width: 100%;
-     }
-     .offset-md-0 {
-         margin-left: 0;
-     }
-     .offset-md-1 {
-         margin-left: 8.33333%;
-     }
-     .offset-md-2 {
-         margin-left: 16.66667%;
-     }
-     .offset-md-3 {
-         margin-left: 25%;
-     }
-     .offset-md-4 {
-         margin-left: 33.33333%;
-     }
-     .offset-md-5 {
-         margin-left: 41.66667%;
-     }
-     .offset-md-6 {
-         margin-left: 50%;
-     }
-     .offset-md-7 {
-         margin-left: 58.33333%;
-     }
-     .offset-md-8 {
-         margin-left: 66.66667%;
-     }
-     .offset-md-9 {
-         margin-left: 75%;
-     }
-     .offset-md-10 {
-         margin-left: 83.33333%;
-     }
-     .offset-md-11 {
-         margin-left: 91.66667%;
-     }
- }
- 
- /* col-lg */
- @media (min-width: 992px) {
-     .col-lg-1 {
-         flex: 0 0 8.33333%;
-         max-width: 8.33333%; 
-     }
-     .col-lg-2 {
-         flex: 0 0 16.66667%;
-         max-width: 16.66667%; 
-     }
-     .col-lg-3 {
-         flex: 0 0 25%;
-         max-width: 25%; 
-     }
-     .col-lg-4 {
-         flex: 0 0 33.33333%;
-         max-width: 33.33333%; 
-     }
-     .col-lg-5 {
-         flex: 0 0 41.66667%;
-         max-width: 41.66667%; 
-     }
-     .col-lg-6 {
-         flex: 0 0 50%;
-         max-width: 50%; 
-     }
-     .col-lg-7 {
-         flex: 0 0 58.33333%;
-         max-width: 58.33333%; 
-     }
-     .col-lg-8 {
-         flex: 0 0 66.66667%;
-         max-width: 66.66667%; 
-     }
-     .col-lg-9 {
-       flex: 0 0 75%;
-       max-width: 75%; 
-     }
-     .col-lg-10 {
-         flex: 0 0 83.33333%;
-         max-width: 83.33333%; 
-     }
-     .col-lg-11 {
-         flex: 0 0 91.66667%;
-         max-width: 91.66667%; 
-     }
-     .col-lg-12 {
-         flex: 0 0 100%;
-         max-width: 100%; 
-     }
-     .offset-lg-0 {
-         margin-left: 0; 
-     }
-     .offset-lg-1 {
-         margin-left: 8.33333%; 
-     }
-     .offset-lg-2 {
-         margin-left: 16.66667%; 
-     }
-     .offset-lg-3 {
-         margin-left: 25%; 
-     }
-     .offset-lg-4 {
-         margin-left: 33.33333%; 
-     }
-     .offset-lg-5 {
-         margin-left: 41.66667%; 
-     }
-     .offset-lg-6 {
-         margin-left: 50%; 
-     }
-     .offset-lg-7 {
-         margin-left: 58.33333%; 
-     }
-     .offset-lg-8 {
-         margin-left: 66.66667%; 
-     }
-     .offset-lg-9 {
-         margin-left: 75%; 
-     }
-     .offset-lg-10 {
-         margin-left: 83.33333%; 
-     }
-     .offset-lg-11 {
-         margin-left: 91.66667%; 
-     } 
- }
-
- /* col-xl */
- @media (min-width: 1200px) {
-    .col-xl-1 {
-        flex: 0 0 8.33333%;
-        max-width: 8.33333%;
-    }
-    .col-xl-2 {
-        flex: 0 0 16.66667%;
-        max-width: 16.66667%;
-    }
-    .col-xl-3 {
-        flex: 0 0 25%;
-        max-width: 25%;
-    }
-    .col-xl-4 {
-        flex: 0 0 33.33333%;
-        max-width: 33.33333%;
-    }
-    .col-xl-5 {
-        flex: 0 0 41.66667%;
-        max-width: 41.66667%;
-    }
-    .col-xl-6 {
-        flex: 0 0 50%;
-        max-width: 50%;
-    }
-    .col-xl-7 {
-        flex: 0 0 58.33333%;
-        max-width: 58.33333%;
-    }
-    .col-xl-8 {
-        flex: 0 0 66.66667%;
-        max-width: 66.66667%;
-    }
-    .col-xl-9 {
-        flex: 0 0 75%;
-        max-width: 75%;
-    }
-    .col-xl-10 {
-        flex: 0 0 83.33333%;
-        max-width: 83.33333%;
-    }
-    .col-xl-11 {
-        flex: 0 0 91.66667%;
-        max-width: 91.66667%;
-    }
-    .col-xl-12 {
-        flex: 0 0 100%;
-        max-width: 100%;
-    }
-    .offset-xl-0 {
-        margin-left: 0;
-    }
-    .offset-xl-1 {
-        margin-left: 8.33333%;
-    }
-    .offset-xl-2 {
-        margin-left: 16.66667%;
-    }
-    .offset-xl-3 {
-        margin-left: 25%;
-    }
-    .offset-xl-4 {
-        margin-left: 33.33333%;
-    }
-    .offset-xl-5 {
-        margin-left: 41.66667%;
-    }
-    .offset-xl-6 {
-        margin-left: 50%;
-    }
-    .offset-xl-7 {
-        margin-left: 58.33333%;
-    }
-    .offset-xl-8 {
-        margin-left: 66.66667%;
-    }
-    .offset-xl-9 {
-        margin-left: 75%;
-    }
-    .offset-xl-10 {
-        margin-left: 83.33333%;
-    }
-    .offset-xl-11 {
-        margin-left: 91.66667%;
-    }
-}
\ No newline at end of file