add: collapsing and deletion animation

Added collapsable cards and animation for deletion and card footer

app/assets/styles/priceCard.css

@@ -1,34 +1,60 @@
 .PriceCard {
+    --height: auto;
     width: 100%;
+    display: grid;
+    transition: var(--transition-default);
+    grid-template-rows: auto 1fr auto;
+    height: var(--height);
+
+    &.deleting {
+        height: 0;
+    }
+
+    &.folded {
+        grid-template-rows: auto 0fr auto;
+    }
 
     & > header {
-        color: white;
+        color: var(--color-white);
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: 1.3em;
 
         & > .Button {
-            scale: 0;
             color: var(--color-white);
             border: 2px solid var(--color-white);
         }
+    }
+
+    & aside {
+        overflow: hidden;
+    }
+
+    & footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        & > .Button.delete {
+            scale: 0;
+        }
 
         & > .Button.deletable {
             scale: 1;
         }
     }
 
-    & > .padding {
+    & .padding {
         gap: 1rem;
         padding: var(--padding-default);
     }
 
-    & > .bg-blue {
+    & .bg-blue {
         background: var(--color-blue);
     }
 
-    & > .bg-white {
+    & .bg-white {
         background: var(--color-white);
     }
 
@@ -40,7 +66,7 @@
         justify-content: space-between;
 
         & > * {
-            flex-basis: 30%;
+            flex-basis: 25%;
             flex-grow: 1;
         }