home products css display

web/themes/custom/materiotheme/assets/styles/base/_colors.scss

@@ -4,6 +4,7 @@ $transparent-bg-blk: rgba(0,0,0, 0.75);
 $color-base:#69cdcf;
 $color-showrooms:#50aa3c;
 $color-blabla:#9458aa;
+$color-webshowroom:rgb(255, 159, 80);
 $alpha: 0.90;
 $color-base-transparent: change-color($color-base, $alpha: $alpha);
 $color-showrooms-transparent: change-color($color-showrooms, $alpha: $alpha);

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -808,7 +808,48 @@ article.node--type-frontpage{
       }
       &.home-pricing{
         @extend %part-centered-layout;
-
+        .field--name-field-pricing{
+          padding:2em 0;
+        }
+        .field--name-computed-products-reference{
+          display: flex;
+          flex-flow: row nowrap;
+          // TODO: mediaQuery column
+          >.field__item{
+            flex:0 0 50%;
+            text-align: center;
+            padding: 2em 0;
+            &:nth-child(1){
+              background-color: $color-base
+            }
+            &:nth-child(2){
+              background-color: $color-webshowroom;
+            }
+            color: #fff;
+            position: relative;
+            height:18em;
+            >div{
+              position: absolute;
+              top:50%; left:50%;
+              transform: translate(-50%, -50%);
+            }
+            .field--name-title{
+              @extend %front-col-field__label;
+              font-weight: 600;
+              line-height: 0.7;
+              padding-bottom: 0.5em;
+              text-align: center;
+              word-spacing: 30000px;
+            }
+            .field--name-field-description{
+              @extend %front-col-descritpion;
+              padding:0.5em;
+              p{
+                margin: 0;
+              }
+            }
+          }
+        }
       }
     }
   }