refactor: make components more modular

would help in implementing name route

also did some stylistic changes

src/styles/modules/components/card/card-basic.module.scss

@@ -0,0 +1,97 @@
+@use '../../../abstracts' as helper;
+
+.container {
+  margin-inline: auto;
+  display: grid;
+
+  grid-template-columns: minmax(25rem, 30rem) 1fr;
+
+  @include helper.bp('bp-900') {
+    grid-template-columns: none;
+    grid-template-rows: 30rem min-content;
+  }
+
+  @include helper.bp('bp-700') {
+    grid-template-rows: 25rem min-content;
+  }
+}
+
+.imageContainer {
+  display: flex; // for bringing out image__NA out of blur
+
+  position: relative;
+  height: auto;
+  width: auto;
+  overflow: hidden;
+
+  background-size: cover;
+  background-position: top;
+  place-items: center;
+
+  @include helper.bp('bp-900') {
+    padding: var(--spacer-2);
+    isolation: isolate;
+
+    // for adding layer of color on top of background image
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        to top,
+        var(--clr-bg-accent) 10%,
+        transparent
+      );
+      backdrop-filter: blur(8px);
+    }
+  }
+}
+
+.image {
+  object-fit: cover;
+  object-position: center;
+
+  @include helper.bp('bp-900') {
+    z-index: 1;
+    object-fit: contain;
+
+    outline: 3px solid var(--clr-fill);
+    outline-offset: 5px;
+
+    max-height: 100%;
+    margin: auto;
+
+    // overrriding nex/future/image defaults
+    height: initial !important;
+    width: initial !important;
+    position: relative !important;
+  }
+}
+
+.imageNA {
+  z-index: 1;
+  fill: var(--clr-fill-muted);
+}
+
+.info {
+  padding: var(--spacer-2) var(--spacer-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacer-2);
+
+  @include helper.bp('bp-900') {
+    // text-align: center;
+    // align-items: center;
+  }
+  @include helper.bp('bp-450') {
+    gap: var(--spacer-1);
+  }
+}
+
+.title {
+  line-height: 1;
+
+  @include helper.bp('bp-900') {
+    text-align: center;
+  }
+}

src/styles/modules/components/card/card-cast.module.scss

@@ -0,0 +1,44 @@
+.item {
+  height: 100%;
+  display: grid;
+  grid-template-rows: minmax(auto, 65%) auto;
+
+  text-decoration: none;
+  color: currentColor;
+}
+
+.imgContainer {
+  justify-self: stretch;
+  position: relative;
+
+  // for icon when image is unavailable
+  display: grid;
+  place-items: center;
+}
+
+.img {
+  height: 100%;
+  object-fit: cover;
+}
+
+.imgNA {
+  fill: var(--clr-fill-muted);
+  height: 40%;
+}
+
+.textContainer {
+  display: grid;
+  gap: var(--spacer-1);
+  padding: var(--spacer-1);
+  text-align: center;
+  justify-items: center;
+  align-content: start;
+}
+
+.name {
+  font-size: 1.2em;
+}
+
+.role {
+  font-size: .95em;
+}

src/styles/modules/components/card/card-result.module.scss

@@ -0,0 +1,62 @@
+@use '../../../abstracts' as helper;
+
+.item {
+  --width: 10rem;
+  --height: var(--width);
+
+  display: grid;
+  grid-template-columns: var(--width) auto;
+
+  text-decoration: none;
+  color: inherit;
+
+  @include helper.bp('bp-450') {
+    --height: 15rem;
+    grid-template-columns: auto;
+  }
+}
+
+.sansImage {
+  grid-template-columns:  auto;
+  padding: var(--spacer-1);
+  
+  .imgContainer {
+    display: none;
+  }
+}
+
+.imgContainer {
+  display: grid;
+  place-items: center;
+  min-height: var(--height);
+  position: relative;
+}
+
+.img {
+  object-fit: cover;
+  object-position: center 25%; // most of the time, person's face is visible at 1/4 of height in a potrait image.
+}
+
+.imgNA {
+  width: 80%;
+  fill: var(--clr-fill-muted);
+}
+
+.info {
+  display: grid;
+  padding: var(--spacer-3);
+  gap: var(--spacer-0);
+
+  @include helper.bp('bp-450') {
+    padding: var(--spacer-1);
+  }
+
+  & :empty {
+    display: none;
+  }
+}
+
+.heading {
+  font-size: var(--fs-4);
+  text-decoration: none;
+}

src/styles/modules/components/card/card-title.module.scss

@@ -0,0 +1,56 @@
+.item {
+  height: 100%;
+  display: grid;
+  grid-template-rows: minmax(auto, 65%) auto;
+
+  text-decoration: none;
+  color: currentColor;
+}
+
+.imgContainer {
+  justify-self: stretch;
+  position: relative;
+
+  // for icon when image is unavailable
+  display: grid;
+  place-items: center;
+}
+
+.img {
+  height: 100%;
+  object-fit: cover;
+}
+
+.imgNA {
+  fill: var(--clr-fill-muted);
+  height: 40%;
+}
+
+.textContainer {
+  display: grid;
+  gap: var(--spacer-1);
+  padding: var(--spacer-1);
+  text-align: center;
+  justify-items: center;
+  align-content: start;
+}
+
+.name {
+  font-size: 1.2em;
+}
+
+.rating {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-0);
+  line-height: 1;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.ratingIcon {
+  --dim: 1em;
+  height: var(--dim);
+  width: var(--dim);
+  fill: var(--clr-fill);
+}

src/styles/modules/components/card/card.module.scss

@@ -0,0 +1,11 @@
+.card {
+  overflow: hidden;
+  border-radius: 5px;
+  background-color: var(--clr-bg-accent);
+  box-shadow: var(--clr-shadow);
+}
+
+.hoverable:hover,
+.hoverable:focus-within {
+  background-color: var(--clr-bg-muted);
+}