CHANGED: style and components directories, removed redundant imports from styles

ADDED: container and card component, card-subcomponents WIP

src/styles/card.sass

@@ -0,0 +1,51 @@
+@import 'mixins/m3-mixins'
+
+div.m3.m3-card-action-area
+    width: 100%
+    height: 100%
+    cursor: pointer
+    contain: content
+    position: relative
+    border-radius: inherit
+    transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
+
+    & > div.m3.m3-card-action-area-content
+        position: absolute
+
+    & > span.m3.m3-card-state-layer
+        width: 100%
+        height: 100%
+        position: absolute
+        transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
+
+    &:hover
+        & > span.m3.m3-card-state-layer
+            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
+
+    &:is(&:focus, &:focus-visible, &:focus-within)
+        & > span.m3.m3-card-state-layer
+            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+
+    &:is(&:focus, &:focus-visible, &:focus-within, &:hover)
+        &:is(.m3-card-outlined, .m3-card-filled)
+            @include elevation-1(false)
+
+        &.m3-card-elevated
+            @include elevation-2(false)
+
+    &:active
+        &:is(.m3-card-outlined, .m3-card-filled)
+            @include elevation-0(true)
+
+        &.m3-card-elevated
+            @include elevation-1(true)
+
+        &:not(&:has(span.m3.m3-ripple-domain))
+            & > span.m3.m3-card-state-layer
+                background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+
+        & > span.m3.m3-card-state-layer
+            background-color: transparent
+
+        & > span.m3.m3-ripple-domain > .m3.ripple
+            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)