Merged in feat/SW-1383-content-card-start-page (pull request #1252)

feat(SW-1383): Implement ContentCard for the Start Page

* feat(SW-1383): Implement ContentCard

- Add ContentCard component
- Use within CarouselCards component

* fix(SW-1383): adjust carousel and content card styling

* refactor(SW-1383): optimize ContentCard component styling and props

* feat(SW-1383): move ContentCard image check out of component

* feat(SW-1383): Add optional link prop to ContentCard component

* refactor(SW-1383): Make ContentCard component linkable


Approved-by: Christian Andolf
Approved-by: Erik Tiekstra

components/ContentCard/contentCard.module.css

@@ -0,0 +1,60 @@
+.card {
+  display: grid;
+}
+
+.imageContainer {
+  position: relative;
+  aspect-ratio: 16/9;
+  border-radius: var(--Corner-radius-Medium);
+  overflow: hidden;
+  transition: border-radius 0.3s ease-in-out;
+}
+
+.image {
+  border-radius: var(--Corner-radius-Medium);
+  transition:
+    transform 0.3s ease-in-out,
+    border-radius 0.3s ease-in-out;
+}
+
+.card:hover,
+.card:hover .imageContainer,
+.card:hover .image {
+  border-radius: var(--Corner-radius-Large);
+}
+
+.card:hover .image {
+  transform: scale(1.05);
+}
+
+.promoTag {
+  position: absolute;
+  top: 14px;
+  left: 14px;
+  text-transform: uppercase;
+}
+
+.content {
+  display: flex;
+  padding: var(--Spacing-x-one-and-half);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--Spacing-x-one-and-half);
+  align-self: stretch;
+}
+
+@media (min-width: 768px) {
+  .card {
+    max-width: 413px;
+  }
+
+  .content {
+    padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2) 0;
+  }
+}
+
+@media (max-width: 767px) {
+  .card {
+    min-width: 300px;
+  }
+}