feature/book-card (#3)

Co-authored-by: Tim Rijkse <trijkse@gmail.com>
Reviewed-on: #3

css/styles.css

@@ -189,6 +189,7 @@ table {
   --color-text: #1e293b;
   --color-text-light: #64748b;
   --color-text-inverse: #ffffff;
+  --color-black: #000000;
 
   --color-background: #ffffff;
   --color-background-secondary: #f8fafc;
@@ -198,6 +199,8 @@ table {
   --color-border-light: #f1f5f9;
 
   --color-push-box-bg: #ebeef4;
+  --color-card-dark-bg: #ebeef4;
+  --color-button-primary: #951d51;
 
   /* Layout */
   --site-header-height: 210px;
@@ -375,13 +378,28 @@ site-content {
   overflow: hidden;
 }
 
+.content-padding {
+  padding-left: var(--spacing-md, 1rem);
+  padding-right: var(--spacing-md, 1rem);
+}
+
 /* ==========================================================================
    Page Components
    ========================================================================== */
 
 /* Section */
 .section {
-  margin-bottom: var(--spacing-xl);
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+  /* Full-width within container */
+  width: 100%;
+  /* Padding inside section */
+  padding-left: var(--spacing-md, 1rem);
+  padding-right: var(--spacing-md, 1rem);
+}
+
+.section-dark {
+  background-color: var(--color-card-dark-bg);
 }
 
 .section-title {
@@ -401,8 +419,9 @@ site-content {
 /* Book Grid */
 .book-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--spacing-md);
+  grid-template-columns: 1fr;
+  gap: var(--spacing-md, 1rem); /* 16px */
+  padding-bottom: var(--spacing-md, 1rem);
 }
 
 /* ==========================================================================