FEATURE introducing component styling

resources/css/components/member-contact-card.css

@@ -0,0 +1,48 @@
+.member-contact-card {
+  @apply flex sm:grid  flex-col gap-y-4 w-full border border-primary p-6 mb-12 sm:items-center bg-white;
+  grid-template-columns: auto 1fr;
+
+  gap: 1rem;
+
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    @apply translate-y-[-4px];
+  }
+  &__profile-picture {
+    @apply w-32 h-32 object-cover p-2 border border-primary;
+
+    img {
+      @apply w-full h-full object-cover;
+    }
+    &--placeholder {
+      @apply bg-carhop-green-100 flex items-center justify-center;
+
+      &:before {
+        content: '';
+        @apply block w-6 h-6  filter-primary;
+        background-image: url('../resources/img/icons/icon-losange.svg');
+        background-size: contain;
+        background-repeat: no-repeat !important;
+        background-position: center;
+      }
+    }
+    &-placeholder {
+      @apply w-full h-full bg-carhop-green-100 relative;
+    }
+  }
+
+  &__description {
+    @apply col-span-2 text-primary;
+  }
+
+  &__infos {
+    @apply w-full flex flex-col md:flex-row flex-wrap justify-start md:justify-between gap-x-2 gap-y-4 md:items-center;
+    .member-contact-card__name {
+      @apply text-2xl uppercase font-medium  tracking-normal;
+    }
+    .member-card__email {
+      @apply !m-0;
+    }
+  }
+}