@deriv-web-design/ui 0.0.24 → 0.0.26

package/dist/index.css

@@ -3277,29 +3277,32 @@
   }
 }
 
-/* templates/Stats/Stats.css */
+/* templates/Stats/StatsV2.css */
 :root {
-  --stats-bg: var(--color-slate-50);
-  --stats-card-bg: var(--color-slate-75);
-  --stats-text-primary: var(--text-primary);
-  --stats-title-size: var(--typography-h2-font-size);
-  --stats-title-lh: var(--typography-h2-line-height);
-  --stats-desc-size: var(--typography-body-md-font-size);
-  --stats-desc-lh: var(--typography-body-md-line-height);
-  --stats-value-size: var(--font-size-3xl);
-  --stats-value-lh: var(--line-height-3xl);
-  --stats-value-featured-size: var(--font-size-5xl);
-  --stats-value-featured-lh: var(--line-height-5xl);
-  --stats-label-size: var(--font-size-lg);
-  --stats-label-lh: var(--line-height-lg);
-}
-.stats {
-  width: 100%;
-  background-color: var(--stats-bg);
+  --stats-v2-bg: transparent;
+  --stats-v2-card-bg: var(--color-slate-75);
+  --stats-v2-text-primary: var(--text-primary);
+  --stats-v2-title-size: var(--typography-h2-font-size);
+  --stats-v2-title-lh: var(--typography-h2-line-height);
+  --stats-v2-desc-size: var(--typography-body-md-font-size);
+  --stats-v2-desc-lh: var(--typography-body-md-line-height);
+  --stats-v2-value-size: 4rem;
+  --stats-v2-value-lh: 4.5rem;
+  --stats-v2-label-size: var(--typography-body-md-font-size);
+  --stats-v2-label-lh: var(--typography-body-md-line-height);
+  --stats-v2-award-heading-size: var(--font-size-xs);
+  --stats-v2-award-heading-lh: var(--line-height-xs);
+  --stats-v2-award-subheading-size: 0.625rem;
+  --stats-v2-award-subheading-lh: var(--line-height-xs);
+  --stats-v2-slot-offset: 110%;
+}
+.stats-v2 {
+  width: 100%;
+  background-color: var(--stats-v2-bg);
   font-family: var(--font-family-base);
   box-sizing: border-box;
 }
-.stats__inner {
+.stats-v2__inner {
   max-width: var(--content-width-1280);
   margin: 0 auto;
   padding: var(--spacing-56) var(--spacing-16);
@@ -3308,35 +3311,36 @@
   gap: var(--spacing-24);
   box-sizing: border-box;
 }
-.stats__header {
+.stats-v2__header {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
+  text-align: left;
 }
-.stats__title {
-  font-size: var(--stats-title-size);
+.stats-v2__title {
+  font-size: var(--stats-v2-title-size);
   font-weight: var(--font-weight-extra-bold);
-  line-height: var(--stats-title-lh);
-  color: var(--stats-text-primary);
+  line-height: var(--stats-v2-title-lh);
+  color: var(--stats-v2-text-primary);
   margin: 0;
 }
-.stats__description {
-  font-size: var(--stats-desc-size);
+.stats-v2__description {
+  font-size: var(--stats-v2-desc-size);
   font-weight: var(--font-weight-regular);
-  line-height: var(--stats-desc-lh);
-  color: var(--stats-text-primary);
+  line-height: var(--stats-v2-desc-lh);
+  color: var(--stats-v2-text-primary);
   margin: 0;
 }
-.stats__content {
+.stats-v2__content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--spacing-32);
   width: 100%;
 }
-.stats__card {
-  background-color: var(--stats-card-bg);
-  border-radius: var(--radius-2xl);
+.stats-v2__card {
+  background-color: var(--stats-v2-card-bg);
+  border-radius: 3rem;
   padding: var(--spacing-24);
   width: 100%;
   max-width: 414px;
@@ -3346,187 +3350,242 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  --stats-value-featured-size: 4rem;
-  --stats-value-featured-lh: 4.5rem;
-  --stats-value-size: 2.5rem;
-  --stats-value-lh: 3rem;
 }
-.stats__card-track {
+.stats-v2__card-track {
   position: relative;
   width: 100%;
   height: 320px;
   overflow: visible;
 }
-.stats__stat {
+.stats-v2__stat {
   position: absolute;
   top: 50%;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  left: 50%;
   text-align: center;
   will-change: transform, opacity;
-  transform: translateY(-50%) scale(1);
+  transform: translate(-50%, -50%);
   opacity: 1;
 }
-.stats__stat-value {
+.stats-v2__stat-value {
   display: block;
   font-family: var(--font-family-base);
-  font-size: var(--stats-value-size);
+  font-size: var(--stats-v2-value-size);
   font-weight: var(--font-weight-extra-bold);
-  line-height: var(--stats-value-lh);
-  text-transform: uppercase;
-  color: var(--stats-text-primary);
+  line-height: var(--stats-v2-value-lh);
+  color: var(--stats-v2-text-primary);
+  margin-bottom: calc(var(--spacing-8) * -1);
 }
-.stats__stat-label {
+.stats-v2__stat-label {
   display: block;
   font-family: var(--font-family-base);
-  font-size: var(--stats-label-size);
+  font-size: var(--stats-v2-label-size);
   font-weight: var(--font-weight-regular);
-  line-height: var(--stats-label-lh);
-  color: var(--stats-text-primary);
-}
-.stats__stat--active .stats__stat-value {
-  font-size: var(--stats-value-featured-size);
-  line-height: var(--stats-value-featured-lh);
-  font-weight: var(--font-weight-extra-bold);
-}
-.stats__stat--inactive .stats__stat-value {
-  font-size: var(--stats-value-size);
-  line-height: var(--stats-value-lh);
-  font-weight: var(--font-weight-extra-bold);
-  color: var(--color-slate-400);
-}
-.stats__stat--inactive .stats__stat-label {
-  color: var(--color-slate-400);
+  line-height: var(--stats-v2-label-lh);
+  color: var(--stats-v2-text-primary);
 }
-.stats__fade {
+.stats-v2__fade {
   position: absolute;
   left: 0;
   right: 0;
-  height: 100px;
+  height: 8rem;
   pointer-events: none;
   z-index: 3;
 }
-.stats__fade--top {
+.stats-v2__fade--top {
   top: 0;
   background:
     linear-gradient(
       180deg,
-      var(--stats-card-bg) 0%,
-      rgba(246, 247, 248, 0) 100%);
+      var(--stats-v2-card-bg) 0%,
+      transparent 100%);
 }
-.stats__fade--bottom {
+.stats-v2__fade--bottom {
   bottom: 0;
   background:
     linear-gradient(
       0deg,
-      var(--stats-card-bg) 0%,
-      rgba(246, 247, 248, 0) 100%);
+      var(--stats-v2-card-bg) 0%,
+      transparent 100%);
 }
-.stats__award {
+.stats-v2__award {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+  width: 100%;
+  max-width: 196px;
+  color: var(--stats-v2-text-primary);
+  box-sizing: border-box;
 }
-.stats__award-image {
+.stats-v2__award-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--spacing-4);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.stats-v2__award-heading {
+  font-size: var(--stats-v2-award-heading-size);
+  line-height: var(--stats-v2-award-heading-lh);
+  font-weight: var(--font-weight-semi-bold);
+  color: var(--stats-v2-text-primary);
+}
+.stats-v2__award-subheading {
+  font-size: var(--stats-v2-award-subheading-size);
+  line-height: var(--stats-v2-award-subheading-lh);
+  font-weight: var(--font-weight-regular);
+  color: var(--stats-v2-text-primary);
+}
+.stats-v2__laurel {
+  flex-shrink: 0;
+  width: 32px;
+  height: 84px;
   display: block;
-  width: 140px;
-  height: auto;
-  object-fit: contain;
-  object-position: center;
 }
-.stats__awards-col {
+.stats-v2__laurel--flip {
+  transform: scaleX(-1);
+}
+.stats-v2__awards-col {
   display: none;
 }
-.stats__awards-mobile {
+.stats-v2__awards-mobile {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--spacing-16);
   width: 100%;
   max-width: 414px;
+  justify-items: center;
 }
-.stats__awards-mobile .stats__award {
-  width: 100%;
-}
-.stats__awards-mobile .stats__award-image {
-  width: 100%;
-  height: auto;
+@media (max-width: 359px) {
+  .stats-v2__awards-mobile {
+    grid-template-columns: 1fr;
+  }
 }
 @media (min-width: 768px) {
-  .stats__header {
+  .stats-v2__header {
     align-items: center;
     text-align: center;
+    max-width: var(--content-width-846);
+    margin-left: auto;
+    margin-right: auto;
   }
-  .stats__inner {
+  .stats-v2__inner {
     gap: var(--spacing-48);
   }
-  .stats__card {
-    padding: var(--spacing-72);
-    --stats-value-featured-size: var(--font-size-5xl);
-    --stats-value-featured-lh: var(--line-height-5xl);
-    --stats-value-size: var(--font-size-3xl);
-    --stats-value-lh: var(--line-height-3xl);
-  }
-  .stats__card-track {
-    height: 270px;
+  .stats-v2__card {
+    padding: var(--spacing-40);
+    --stats-v2-value-size: var(--font-size-5xl);
+    --stats-v2-value-lh: var(--line-height-5xl);
   }
-  .stats__fade {
-    height: 65px;
+  .stats-v2__card-track {
+    height: 320px;
   }
 }
 @media (min-width: 992px) {
-  .stats__inner {
+  .stats-v2__inner {
     padding: var(--spacing-112) var(--spacing-24);
-    gap: var(--spacing-80);
-  }
-  .stats__header {
-    max-width: var(--content-width-846);
-    margin-left: auto;
-    margin-right: auto;
+    gap: var(--spacing-48);
   }
-  .stats__content {
+  .stats-v2__content {
     flex-direction: row;
     align-items: stretch;
     justify-content: center;
     gap: var(--spacing-24);
   }
-  .stats__card {
+  .stats-v2__card {
     width: 414px;
     max-width: none;
     height: 414px;
-    padding: var(--spacing-72);
+    padding: var(--spacing-40);
     flex-shrink: 0;
   }
-  .stats__card-track {
-    height: 270px;
-  }
-  .stats__fade {
-    height: 65px;
+  .stats-v2__card-track {
+    height: 334px;
   }
-  .stats__awards-col {
+  .stats-v2__awards-col {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-32);
     width: 196px;
+    height: 414px;
     flex-shrink: 0;
     align-items: center;
+    justify-content: center;
     will-change: transform;
   }
-  .stats__awards-col--left,
-  .stats__awards-col--right {
-    justify-content: center;
+  .stats-v2__awards-col--left {
+    transform: translateY(-26.3%);
   }
-  .stats__awards-col .stats__award-image {
-    width: 196px;
-    height: auto;
+  .stats-v2__awards-col--right {
+    transform: translateY(26.3%);
   }
-  .stats__awards-mobile {
+  .stats-v2__awards-mobile {
     display: none;
   }
 }
 
+/* templates/Stats/StatsSimple.css */
+:root {
+  --stats-simple-bg: transparent;
+  --stats-simple-text-primary: var(--text-primary);
+  --stats-simple-text-secondary: var(--text-secondary);
+  --stats-simple-value-size: var(--font-size-4xl);
+  --stats-simple-value-lh: var(--line-height-4xl);
+  --stats-simple-label-size: var(--typography-body-md-font-size);
+  --stats-simple-label-lh: var(--typography-body-md-line-height);
+}
+.stats-simple {
+  width: 100%;
+  background-color: var(--stats-simple-bg);
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+}
+.stats-simple__inner {
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-40) var(--spacing-24);
+  box-sizing: border-box;
+}
+.stats-simple__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+.stats-simple__value {
+  font-size: var(--stats-simple-value-size);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--stats-simple-value-lh);
+  color: var(--stats-simple-text-primary);
+}
+.stats-simple__label {
+  font-size: var(--stats-simple-label-size);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--stats-simple-label-lh);
+  color: var(--stats-simple-text-secondary);
+}
+@media (min-width: 768px) {
+  .stats-simple__inner {
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--spacing-24);
+    padding: var(--spacing-64) var(--spacing-24);
+  }
+}
+@media (min-width: 992px) {
+  .stats-simple__inner {
+    padding: var(--spacing-80) var(--spacing-24);
+  }
+  :root {
+    --stats-simple-value-size: var(--font-size-4xl);
+    --stats-simple-value-lh: var(--line-height-4xl);
+  }
+}
+
 /* templates/FeatureScroll/FeatureScroll.css */
 :root {
   --fs-bg: var(--color-slate-50);
@@ -5144,8 +5203,8 @@
   --lm-card-py-mobile: var(--spacing-12);
   --lm-card-img-h: var(--spacing-112);
   --lm-card-img-h-mobile: 5.375rem;
-  --lm-card-gap: var(--spacing-24);
-  --lm-col-gap: var(--spacing-24);
+  --lm-card-gap: var(--spacing-16);
+  --lm-col-gap: var(--spacing-16);
   --lm-carousel-height: 39.375rem;
   --lm-carousel-height-mob: 20.5rem;
   --lm-fade-height: var(--spacing-64);
@@ -5545,10 +5604,10 @@
 /* templates/DownloadBanner/DownloadBanner.css */
 :root {
   --db-section-bg-light: var(--color-slate-100);
-  --db-section-bg-light-2: var(--color-slate-50);
+  --db-section-bg-light-2: var(--background-surface);
   --db-section-bg-dark: var(--color-slate-50);
   --db-card-bg-light: var(--color-slate-50);
-  --db-card-bg-light-2: var(--color-slate-100);
+  --db-card-bg-light-2: var(--background-surface-secondary);
   --db-card-bg-dark: var(--color-slate-1200);
   --db-title-color-light: var(--text-primary);
   --db-title-color-dark: var(--color-slate-50);
@@ -6278,11 +6337,11 @@
 }
 
 /* templates/Leaders/Leaders.css */
-.leaders {
+.avatar-grid {
   width: 100%;
   background-color: var(--color-slate-50);
 }
-.leaders__container {
+.avatar-grid__container {
   display: flex;
   flex-direction: column;
   max-width: var(--content-width-1280);
@@ -6294,20 +6353,27 @@
   gap: var(--spacing-48);
 }
 @media (min-width: 992px) {
-  .leaders__container {
+  .avatar-grid__container {
     padding: var(--spacing-112) var(--spacing-24);
     gap: var(--spacing-80);
   }
 }
-.leaders__header {
+.avatar-grid__header {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  text-align: center;
+  align-items: flex-start;
+  text-align: left;
   width: 100%;
   max-width: var(--content-width-846);
+  gap: var(--spacing-16);
+}
+@media (min-width: 992px) {
+  .avatar-grid__header {
+    align-items: center;
+    text-align: center;
+  }
 }
-.leaders__title {
+.avatar-grid__title {
   font-family: var(--typography-h2-font-family);
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
@@ -6315,67 +6381,75 @@
   color: var(--color-slate-1200);
   margin: 0;
 }
-.leaders__grid-wrapper {
+.avatar-grid__description {
+  font-family: var(--typography-body-lg-font-family);
+  font-size: var(--typography-body-lg-font-size);
+  font-weight: var(--typography-body-lg-font-weight);
+  line-height: var(--typography-body-lg-line-height);
+  color: var(--color-slate-900);
+  margin: 0;
+}
+.avatar-grid__grid-wrapper {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
-.leaders__grid {
+.avatar-grid__grid {
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--spacing-24);
+  row-gap: var(--spacing-32);
+  column-gap: var(--spacing-16);
   width: 100%;
 }
 @media (min-width: 768px) {
-  .leaders__grid {
+  .avatar-grid__grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 @media (min-width: 992px) {
-  .leaders__grid {
+  .avatar-grid__grid {
     grid-template-columns: repeat(4, 1fr);
-    gap: var(--spacing-32);
   }
 }
-.leaders__extra-cards {
+.avatar-grid__extra-cards {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.8s cubic-bezier(0.16, 1, 0.3, 1);
   width: 100%;
 }
-.leaders__extra-cards--open {
+.avatar-grid__extra-cards--open {
   grid-template-rows: 1fr;
 }
-.leaders__extra-grid {
+.avatar-grid__extra-grid {
   min-height: 0;
   overflow: hidden;
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--spacing-24);
+  row-gap: var(--spacing-32);
+  column-gap: var(--spacing-16);
   padding-top: var(--spacing-24);
 }
 @media (min-width: 768px) {
-  .leaders__extra-grid {
+  .avatar-grid__extra-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 @media (min-width: 992px) {
-  .leaders__extra-grid {
+  .avatar-grid__extra-grid {
     grid-template-columns: repeat(4, 1fr);
-    gap: var(--spacing-32);
     padding-top: var(--spacing-32);
   }
 }
-.leaders__extra-card {
+.avatar-grid__extra-card {
   opacity: 0;
   transform: translateY(16px);
   transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.leaders__extra-card--visible {
+.avatar-grid__extra-card--visible {
   opacity: 1;
   transform: translateY(0);
 }
-.leaders__card {
+.avatar-grid__card {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -6384,7 +6458,7 @@
   border-radius: var(--radius-2xl);
   width: 100%;
 }
-.leaders__image-wrapper {
+.avatar-grid__image-wrapper {
   width: 100%;
   aspect-ratio: 1 / 1;
   border-radius: var(--radius-2xl);
@@ -6392,7 +6466,7 @@
   position: relative;
   background-color: var(--color-slate-100);
 }
-.leaders__image {
+.avatar-grid__image {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -6401,14 +6475,14 @@
   object-position: center;
   display: block;
 }
-.leaders__content {
+.avatar-grid__content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: var(--spacing-8);
   width: 100%;
 }
-.leaders__name {
+.avatar-grid__name {
   font-family: var(--typography-h5-font-family);
   font-size: var(--typography-h5-font-size);
   font-weight: var(--typography-h5-font-weight);
@@ -6416,7 +6490,7 @@
   color: var(--color-slate-1200);
   margin: 0;
 }
-.leaders__role {
+.avatar-grid__role {
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
@@ -6424,19 +6498,406 @@
   color: var(--color-slate-1200);
   margin: 0;
 }
-.leaders__link {
+.avatar-grid__link {
   margin-top: calc(var(--spacing-8) * -1);
 }
-.leaders__link .icon {
+.avatar-grid__link .icon {
   color: #0072B1 !important;
 }
-.leaders__link:hover .icon {
+.avatar-grid__link:hover .icon {
   color: #005582 !important;
 }
-.leaders__actions {
+.avatar-grid__actions {
   display: flex;
   justify-content: center;
   width: 100%;
   padding-top: var(--spacing-16);
 }
+@media (min-width: 992px) {
+  .avatar-grid__actions {
+    padding-top: 0;
+    margin-top: calc(var(--spacing-48) - var(--spacing-80));
+    width: auto;
+  }
+  .avatar-grid__actions .button {
+    width: auto;
+  }
+}
+
+/* templates/ImageBanner/ImageBanner.css */
+.image-banner {
+  width: 100%;
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+  padding: var(--spacing-56) 0;
+}
+@media (min-width: 992px) {
+  .image-banner {
+    padding: var(--spacing-112) var(--spacing-24);
+  }
+}
+.image-banner__inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  border-radius: 0;
+  overflow: hidden;
+  background-color: var(--color-slate-1200);
+  min-height: 480px;
+}
+@media (min-width: 992px) {
+  .image-banner__inner {
+    border-radius: var(--radius-2xl);
+  }
+}
+@media (min-width: 992px) {
+  .image-banner__inner--split {
+    flex-direction: row;
+    align-items: stretch;
+  }
+}
+.image-banner__inner--full-bg {
+  min-height: 740px;
+}
+@media (min-width: 992px) {
+  .image-banner__inner--full-bg {
+    min-height: 480px;
+    max-height: 480px;
+  }
+}
+.image-banner__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  text-align: left;
+  gap: var(--spacing-16);
+  padding: var(--spacing-48) var(--spacing-24);
+  flex: 0 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+}
+@media (min-width: 992px) {
+  .image-banner__content {
+    gap: var(--spacing-24);
+  }
+  .image-banner__inner--split .image-banner__content {
+    width: 50%;
+    padding: var(--spacing-64) var(--spacing-56);
+    justify-content: center;
+  }
+  .image-banner__inner--full-bg .image-banner__content {
+    width: 60%;
+    padding: var(--spacing-64) var(--spacing-56);
+    justify-content: center;
+    flex: 1 1 auto;
+    align-self: stretch;
+  }
+}
+.image-banner__title {
+  font-family: var(--typography-h2-font-family);
+  font-size: var(--typography-h2-font-size);
+  font-weight: var(--typography-h2-font-weight);
+  line-height: var(--typography-h2-line-height);
+  color: var(--color-slate-50);
+  margin: 0;
+}
+.image-banner__description {
+  font-family: var(--typography-body-md-font-family);
+  font-size: var(--typography-body-md-font-size);
+  font-weight: var(--typography-body-md-font-weight);
+  line-height: var(--typography-body-md-line-height);
+  color: var(--color-slate-50);
+  margin: 0;
+  opacity: 0.9;
+  max-width: 42ch;
+}
+.image-banner__actions {
+  display: flex;
+  align-items: center;
+  padding-top: var(--spacing-8);
+}
+.image-banner__image-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+@media (min-width: 992px) {
+  .image-banner__image-wrapper {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 55%;
+    aspect-ratio: unset;
+  }
+}
+.image-banner__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center top;
+  display: block;
+}
+.image-banner__bg-image-wrapper {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+.image-banner__bg-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  display: block;
+}
+.image-banner__bg-overlay {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0.72) 0%,
+      rgba(0, 0, 0, 0.48) 50%,
+      rgba(0, 0, 0, 0.10) 100%);
+}
+
+/* templates/Testimonial/Testimonial.css */
+:root {
+  --testimonial-bg: var(--color-slate-75);
+  --testimonial-card-bg: var(--color-slate-50);
+  --testimonial-card-radius: 2rem;
+  --testimonial-card-shadow: none;
+  --testimonial-card-min-height: 416px;
+  --testimonial-title-color: var(--color-slate-1200);
+  --testimonial-quote-color: var(--color-slate-900);
+  --testimonial-author-name-color: var(--color-slate-1200);
+  --testimonial-author-location-color: var(--color-slate-700);
+  --testimonial-dot-color: var(--color-slate-300);
+  --testimonial-dot-active-color: var(--color-slate-1200);
+  --testimonial-quotemark-color: var(--color-slate-200);
+}
+.testimonial {
+  width: 100%;
+  background-color: var(--testimonial-bg);
+}
+.testimonial__container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  box-sizing: border-box;
+  width: 100%;
+  gap: var(--spacing-48);
+}
+@media (min-width: 768px) {
+  .testimonial__container {
+    padding: var(--spacing-56) var(--spacing-24);
+  }
+}
+@media (min-width: 992px) {
+  .testimonial__container {
+    padding: var(--spacing-112) var(--spacing-24);
+    gap: var(--spacing-64);
+  }
+}
+.testimonial__title {
+  font-family: var(--typography-h2-font-family);
+  font-size: var(--typography-h2-font-size);
+  font-weight: var(--typography-h2-font-weight);
+  line-height: var(--typography-h2-line-height);
+  color: var(--testimonial-title-color);
+  margin: 0;
+  text-align: left;
+  width: 100%;
+}
+.testimonial__carousel {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-32);
+}
+.testimonial__card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-width: var(--content-width-1280);
+  min-height: var(--testimonial-card-min-height);
+  background-color: var(--testimonial-card-bg);
+  border-radius: var(--testimonial-card-radius);
+  box-shadow: var(--testimonial-card-shadow);
+  padding: 148px var(--spacing-32) var(--spacing-48);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  text-align: left;
+  gap: var(--spacing-24);
+  overflow: hidden;
+}
+@media (min-width: 992px) {
+  .testimonial__card {
+    padding: var(--spacing-56) var(--spacing-80);
+    align-items: center;
+    text-align: center;
+  }
+}
+.testimonial__quotemark {
+  position: absolute;
+  user-select: none;
+  line-height: 0;
+}
+.testimonial__quotemark-img {
+  width: 100px;
+  height: auto;
+  display: block;
+}
+.testimonial__quotemark--open {
+  top: var(--spacing-24);
+  left: var(--spacing-24);
+}
+.testimonial__quotemark--close {
+  bottom: var(--spacing-24);
+  right: var(--spacing-24);
+  display: none;
+}
+@media (min-width: 992px) {
+  .testimonial__quotemark-img {
+    width: 130px;
+  }
+  .testimonial__quotemark--open {
+    top: var(--spacing-32);
+    left: var(--spacing-40);
+  }
+  .testimonial__quotemark--close {
+    display: block;
+    bottom: var(--spacing-32);
+    right: var(--spacing-40);
+  }
+}
+.testimonial__quote {
+  font-family: var(--typography-body-lg-font-family);
+  font-size: var(--typography-body-lg-font-size);
+  font-weight: var(--typography-body-lg-font-weight);
+  line-height: var(--typography-body-lg-line-height);
+  color: var(--testimonial-quote-color);
+  text-align: left;
+  margin: 0;
+  max-width: 680px;
+  position: relative;
+  z-index: 1;
+}
+@media (min-width: 992px) {
+  .testimonial__quote {
+    text-align: center;
+  }
+}
+.testimonial__author {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+  position: relative;
+  z-index: 1;
+}
+@media (min-width: 992px) {
+  .testimonial__author {
+    align-items: center;
+  }
+}
+.testimonial__author-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: var(--spacing-8);
+}
+.testimonial__author-name {
+  font-family: var(--typography-body-lg-font-family);
+  font-size: var(--typography-body-lg-font-size);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: var(--typography-body-lg-line-height);
+  color: var(--testimonial-author-name-color);
+  margin: 0;
+}
+.testimonial__author-location {
+  font-family: var(--typography-body-md-font-family);
+  font-size: var(--typography-body-md-font-size);
+  font-weight: var(--typography-body-md-font-weight);
+  line-height: var(--typography-body-md-line-height);
+  color: var(--testimonial-author-location-color);
+  margin: 0;
+}
+.testimonial__dots {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+.testimonial__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--testimonial-dot-color);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+  flex-shrink: 0;
+}
+.testimonial__dot:hover {
+  background-color: var(--testimonial-dot-active-color);
+}
+.testimonial__dot--active {
+  background-color: var(--testimonial-dot-active-color);
+  transform: scale(1.25);
+}
+.testimonial__slides {
+  position: relative;
+  display: grid;
+  width: 100%;
+}
+.testimonial__slide {
+  grid-area: 1 / 1;
+  width: 100%;
+  align-self: stretch;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 0s linear 0.35s;
+  transform: translateY(6px);
+}
+.testimonial__slide--active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+  transition:
+    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 0s linear 0s;
+}
+.testimonial__slide--exiting {
+  opacity: 0;
+  visibility: visible;
+  transform: translateY(-6px);
+  transition:
+    opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
+    transform 0.2s cubic-bezier(0.4, 0, 1, 1),
+    visibility 0s linear 0.2s;
+}
 /*# sourceMappingURL=index.css.map */