Added CTA container

Author: kfoolable

starter/07-Omnifood-Desktop/css/general.css

@@ -25,15 +25,18 @@ Paragraph default: 1.6
 
 Primary: #e67e22
 
-Tints: #fdf2e9, #fae5d3
+Tints: #fdf2e9, #fae5d3, #eb984e
 Shades: #cf711f,
-Accents:
-Greys: #555, #333,
+Accents: #51cf66
+Greys: #555, #333, #6f6f6f (lightest grey allowed on #fdf2e9)
 
 --- 03 SHADOWS ---
 
+0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
+
 --- 04 BORDER-RADIUS ---
 Default: 9px
+Medium: 11px
 
 --- 05 WHITE SPACE ---
 
@@ -75,6 +78,17 @@ body {
   display: grid;
   column-gap: 6.4rem;
   row-gap: 9.6rem;
+
+  /* margin-bottom: 9.6rem; */
+}
+
+/* .grid:last-child {
+  margin-bottom: 0;
+} */
+
+/* If the .grid is NOT the :last-child, add the margin-bottom */
+.grid:not(:last-child) {
+  margin-bottom: 9.6rem;
 }
 
 .grid--2-cols {
@@ -85,6 +99,10 @@ body {
   grid-template-columns: repeat(3, 1fr);
 }
 
+.grid--4-cols {
+  grid-template-columns: repeat(4, 1fr);
+}
+
 .grid--center-v {
   align-items: center;
 }
@@ -134,7 +152,8 @@ body {
   text-decoration: none;
 
   /* Always put transition on original "state" */
-  transition: background-color 0.3s;
+  /* transition: background-color 0.3s; */
+  transition: all 0.3s;
 }
 
 .btn--full:link,
@@ -162,6 +181,56 @@ body {
   box-shadow: inset 0 0 0 3px #fff;
 }
 
+.link:link,
+.link:visited {
+  display: inline-block;
+  color: #e67e22;
+  text-decoration: none;
+  border-bottom: 1px solid currentColor;
+  padding-bottom: 2px;
+  transition: all 0.3s;
+}
+
+.link:hover,
+.link:active {
+  color: #cf711f;
+  border-bottom: 1px solid transparent;
+}
+
+.list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+
+.list-icon {
+  width: 3rem;
+  height: 3rem;
+  color: #e67e22;
+}
+
+.list-item {
+  font-size: 1.8rem;
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+}
+
+/* HELPER/SETTINGS CLASSES */
+
 .margin-right-sm {
   margin-right: 1.6rem !important;
 }
+
+.margin-bottom-md {
+  margin-bottom: 4.8rem !important;
+}
+
+.center-text {
+  text-align: center;
+}
+
+strong {
+  font-weight: 500;
+}