Add quotation marks

components/QuotationCarousel.module.css

@@ -5,6 +5,7 @@
   gap: calc(8rem / 16);
 
   width: calc(600rem / 16);
+  min-height: calc(100rem / 16);
 }
 
 .carouselButton {
@@ -30,11 +31,15 @@
 }
 
 .card {
-  min-height: calc(100rem / 16);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+
+  min-height: inherit;
   height: 100%;
   width: 100%;
   padding: calc(30rem / 16);
-  box-sizing: border-box;
 
   background-color: var(--primary-accent);
   border: calc(2rem / 16) solid var(--primary-accent-lighter);
@@ -44,3 +49,26 @@
 .card:not(.active) {
   display: none;
 }
+
+.card p {
+  margin: 0 calc(16rem / 16);
+
+  font-weight: bold;
+}
+
+.quotationMark {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+
+  height: calc(50rem / 16);
+
+  font-size: calc(50rem / 16);
+  font-weight: bold;
+  line-height: 0;
+}
+
+.right.quotationMark {
+  justify-content: end;
+  align-items: end;
+}

components/QuotationCarousel.tsx

@@ -46,7 +46,14 @@ export function QuotationCarousel(props: QuotationCarouselProps) {
 function QuotationCard({ quote, isActive }: QuotationCardProps) {
   const className = isActive ? `${styles.active} ${styles.card}` : styles.card;
 
-  return <div className={className}>{quote}</div>;
+  return (
+    <div className={className}>
+      {/* TODO: improve quotation mark alignment - maybe use images? */}
+      <div className={styles.quotationMark}>“</div>
+      <p>{quote}</p>
+      <div className={`${styles.right} ${styles.quotationMark}`}>”</div>
+    </div>
+  );
 }
 
 function CarouselButton({ isPrevious, onClick }: CarouselButtonProps) {