From 289ecec44ee42dd7f7418ee2de95bc4e982329f5 Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Sat, 6 Jun 2026 22:45:51 +0300
Subject: [PATCH] space testimonial cards

---
 frontend/rabbi_gerzi/src/views/HomePage.vue | 24 ++++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/rabbi_gerzi/src/views/HomePage.vue b/frontend/rabbi_gerzi/src/views/HomePage.vue
index cccab88..c693780 100644
--- a/frontend/rabbi_gerzi/src/views/HomePage.vue
+++ b/frontend/rabbi_gerzi/src/views/HomePage.vue
@@ -698,10 +698,14 @@ const projects: Project[] = [
 .testimonials {
   background: var(--color-cream);
   padding: 5rem 2rem;
+  --testimonials-card-gap: 24px;
+  --testimonials-card-height: 220px;
+  --testimonials-controls-gap: 0.75rem;
+  --testimonials-stage-width: 1008px;
 }
 
 .testimonials__inner {
-  max-width: 960px;
+  max-width: var(--testimonials-stage-width);
   margin: 0 auto;
   text-align: center;
 }
@@ -716,9 +720,9 @@ const projects: Project[] = [
 
 .testimonials__stage {
   position: relative;
-  width: min(100%, 960px);
+  width: min(100%, var(--testimonials-stage-width));
+  height: var(--testimonials-card-height);
   margin: 0 auto;
-  min-height: 220px;
   overflow: hidden;
 }
 
@@ -727,8 +731,8 @@ const projects: Project[] = [
   border-radius: 14px;
   padding: 2rem;
   text-align: left;
-  width: 50%;
-  max-width: 480px;
+  width: calc(50% - var(--testimonials-card-gap));
+  height: var(--testimonials-card-height);
   opacity: 0;
   visibility: hidden;
   position: absolute;
@@ -758,11 +762,11 @@ const projects: Project[] = [
 }
 
 .testimonials__card--previous {
-  transform: translateX(-150%);
+  transform: translateX(calc(-150% - var(--testimonials-card-gap)));
 }
 
 .testimonials__card--next {
-  transform: translateX(50%);
+  transform: translateX(calc(50% + var(--testimonials-card-gap)));
 }
 
 .testimonials__name {
@@ -786,7 +790,7 @@ const projects: Project[] = [
   display: flex;
   justify-content: center;
   gap: 0.75rem;
-  margin-top: 2rem;
+  margin-top: var(--testimonials-controls-gap);
 }
 
 .testimonials__arrow {
@@ -1127,6 +1131,10 @@ const projects: Project[] = [
 }
 
 @media (max-width: 768px) {
+  .testimonials {
+    --testimonials-card-height: 320px;
+  }
+
   .hero__content {
     grid-template-columns: 1fr;
     text-align: center;