change deck view

site/client/assets/sass/_shame_cards.scss

@@ -4,7 +4,14 @@
   height: 227px;
 }
 
-.card {
+.card-img-small {
+  background-size: 70px 132px;
+  width: 70px;
+  height: 132px;
+}
+
+.card,
+.card-small-small {
   float: left;
   border-radius: 12px;
   position: relative;
@@ -13,6 +20,12 @@
   left: 3px;
 }
 
+.card-small-small {
+  top: 2px;
+  left: 2px;
+  border-radius: 8px;
+}
+
 .bla {
   border-radius: 14px;
   width: 100%;
@@ -21,7 +34,12 @@
   opacity: 0;
 }
 
-.card-wrap:hover .bla {
+.card-wrap-small .bla {
+  border-radius: 8px;
+}
+
+.card-wrap:hover .bla,
+.card-wrap-small:hover .bla {
   box-shadow: 0 0 2px 0 orange;
   opacity: 1;
 }
@@ -40,7 +58,8 @@
   opacity: 0;
 }
 
-.card-wrap:hover .shadow {
+.card-wrap:hover .shadow,
+.card-wrap-small:hover .shadow {
   -webkit-animation: Shadow 4s ease-in-out infinite;
   -moz-animation: Shadow 4s ease-in-out infinite;
   animation: Shadow 4s ease-in-out infinite;
@@ -51,7 +70,8 @@
   transition: all .05s ease-in-out 0s;
 }
 
-.card-wrap .ani {
+.card-wrap .ani,
+.card-wrap-small .ani {
   background: linear-gradient(2deg, #ffa500, #ffd68b, #ffa500, #ffa500);
   background-size: 800% 800%;
 
@@ -125,7 +145,8 @@
   cursor: pointer;
 }
 
-.card-wrap:hover .overlay-card {
+.card-wrap:hover .overlay-card,
+.card-wrap-small:hover .overlay-card {
   opacity: 1;
   -webkit-animation: AnimationName 10s ease infinite;
   -moz-animation: AnimationName 10s ease infinite;
@@ -159,7 +180,16 @@
 
 }
 
-.card-wrap:hover {
+.card-wrap-small {
+  float: left;
+  width: 74px;
+  height: 136px;
+  position: relative;
+  padding: 4px;
+}
+
+.card-wrap:hover,
+.card-wrap-small:hover {
   z-index: 100;
   //transform: scale(1.01,1.01) !important;
 }
@@ -227,6 +257,7 @@
   .heading-my-deck {
     float: left;
     width: 47%;
+    padding: 0 0 0 10px;
   }
 
   span {