feat(LOY-196): add modal to dtmc button containing card

apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css

@@ -1,4 +1,4 @@
-.card {
+.button {
   padding: var(--Space-x2) var(--Space-x15);
   border-radius: var(--Corner-radius-md);
   border: 0;
@@ -28,3 +28,80 @@
   align-items: center;
   gap: var(--Space-x1);
 }
+
+.title {
+  color: var(--Text-Accent-Primary);
+}
+
+.card {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--Corner-radius-lg);
+  box-shadow: 0 2px 1px rgb(255 255 255 / 11%) inset;
+  padding: var(--Space-x2);
+  height: 400px;
+  width: 327px;
+  max-width: 100%;
+  color: var(--Text-Brand-OnPrimary-3-Accent);
+  background-color: var(--Surface-Brand-Primary-1-OnSurface-Default);
+
+  &::before {
+    content: "";
+    position: absolute;
+    z-index: 2;
+    bottom: 158px;
+    left: 132px;
+    width: 360px;
+    height: 360px;
+    opacity: 0.3;
+    background: #e9aba3;
+    box-shadow: 192px 192px 192px;
+    border-radius: 9999px;
+    filter: blur(96px);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: 60px;
+    left: -210px;
+    width: 2465px;
+    height: 459px;
+    background-image: url("/_static/img/scandic-logotype.svg");
+    background-repeat: no-repeat;
+    opacity: 0.2;
+  }
+}
+
+.content {
+  position: relative;
+  z-index: 3;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.employeeNumber {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--Base-Text-Inverted);
+}
+
+.top,
+.bottom {
+  display: flex;
+  justify-content: space-between;
+}
+
+.middle {
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
+}
+
+.footer {
+  text-align: center;
+}