styled front side of the card component

src/commons/tours-section/tours.jsx

@@ -8,7 +8,23 @@ function Tours() {
       <div className="row">
         <div className="col-1-of-3">
           <div className="card">
-            <div className="card__side card__side--front">Front</div>
+            <div className="card__side card__side--front">
+              <div className="card__picture card__picture--1">&nbsp;</div>
+              <h4 className="card__heading">
+                <span className="card__heading-span card__heading-span--1">
+                  The Sea Explorer
+                </span>
+              </h4>
+              <div className="card__details">
+                <ul>
+                  <li>3 day tours</li>
+                  <li>Up to 30 people</li>
+                  <li>2 tour guides</li>
+                  <li>Sleep in cozy hotels</li>
+                  <li>Difficulty: easy</li>
+                </ul>
+              </div>
+            </div>
             <div className="card__side  card__side--back card__side--back-1">
               Back
             </div>

src/sass/abstracts/_variables.scss

@@ -10,6 +10,7 @@ $color-tertiary-light: #2998ff;
 $color-tertiary-dark: #5643fa;
 
 $color-grey-light-1: #f7f7f7;
+$color-grey-light-2: #eee;
 
 $color-grey-dark: #777;
 $color-white: #fff;

src/sass/components/_card.scss

@@ -1,12 +1,11 @@
 .card {
+  // functionality
   perspective: 150rem;
   position: relative;
-  height: 50rem;
+  height: 52rem;
 
   &__side {
-    font-size: 2rem;
+    height: 52rem;
-
-    height: 50rem;
     transition: all 0.58s ease;
     position: absolute;
     top: 0;
@@ -14,6 +13,7 @@
     width: 100%;
     backface-visibility: hidden;
     border-radius: 3px;
+    overflow: hidden;
     box-shadow: $shadow-default;
 
     &--front {
@@ -34,10 +34,79 @@
   }
 
   &:hover &__side--front {
-    transform: rotateY(180deg);
+    transform: rotateY(-180deg);
   }
 
   &:hover &__side--back {
     transform: rotateY(0deg);
   }
+
+  // Front side styling
+
+  &__picture {
+    background-size: cover;
+    height: 23rem;
+    background-blend-mode: screen;
+    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
+
+    &--1 {
+      background-image: linear-gradient(
+          to right bottom,
+          $color-secondary-light,
+          $color-secondary-dark
+        ),
+        url(../../commons/images/nat-5.jpg);
+    }
+
+    &--2 {
+      background-image: url(../../commons/images/nat-5.jpg);
+    }
+
+    &--3 {
+      background-image: url(../../commons/images/nat-5.jpg);
+    }
+  }
+
+  &__heading {
+    font-size: 2.8rem;
+    font-weight: 300;
+    text-transform: uppercase;
+    color: $color-white;
+    position: absolute;
+    top: 12rem;
+    right: 2rem;
+    text-align: right;
+    width: 75%;
+  }
+
+  &__heading-span {
+    padding: 1rem 1.5rem;
+    box-decoration-break: clone;
+    &--1 {
+      background-image: linear-gradient(
+        to right bottom,
+        rgba($color-secondary-light, 0.85),
+        rgba($color-secondary-dark, 0.85)
+      );
+    }
+  }
+
+  &__details {
+    padding: 3rem;
+    ul {
+      list-style: none;
+      width: 80%;
+      margin: 0 auto;
+
+      li {
+        text-align: center;
+        font-size: 1.5rem;
+        padding: 1rem;
+
+        &:not(:last-child) {
+          border-bottom: 1px solid $color-grey-light-2;
+        }
+      }
+    }
+  }
 }