@deriv-web-design/ui 0.0.14 → 0.0.15

package/dist/index.css

@@ -1240,6 +1240,7 @@
   flex-shrink: 0;
   position: relative;
   overflow: hidden;
+  background-color: transparent;
 }
 .card-primary .cp-image {
   position: absolute;
@@ -1247,6 +1248,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: center;
   display: block;
 }
 .card-primary .cp-imageOverlay {
@@ -1261,6 +1263,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: center;
   display: block;
 }
 .card-primary .cp-gradient {
@@ -1328,6 +1331,7 @@
   overflow: hidden;
   flex-shrink: 0;
   outline: 1px solid var(--border-subtle);
+  background-color: transparent;
 }
 .card-thumbnail .ct-thumbnailImage {
   position: absolute;
@@ -1335,6 +1339,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: center;
   border-radius: inherit;
   pointer-events: none;
   display: block;
@@ -1521,7 +1526,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-48);
-  max-width: 1280px;
+  max-width: var(--content-width-1280);
   margin: 0 auto;
   padding: var(--spacing-56) var(--spacing-16);
   box-sizing: border-box;
@@ -1588,7 +1593,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-48);
-  max-width: 1280px;
+  max-width: var(--content-width-1280);
   margin: 0 auto;
   padding: var(--spacing-56) var(--spacing-16);
   box-sizing: border-box;
@@ -2172,7 +2177,7 @@
   position: relative;
   z-index: 3;
   width: 100%;
-  max-width: 1280px;
+  max-width: var(--content-width-1280);
   margin: 0 auto;
   box-sizing: border-box;
   padding: var(--spacing-24) var(--spacing-16);
@@ -2215,7 +2220,7 @@
 .hero--split {
   background-color: var(--hero-dark-bg);
   background-size: cover;
-  background-position: center top;
+  background-position: center;
   background-repeat: no-repeat;
   height: 100vh;
   display: flex;
@@ -2266,20 +2271,23 @@
 }
 .hero--split .hero__image-slot {
   position: absolute;
-  bottom: 0;
+  top: 10vh;
+  bottom: auto;
   left: 0;
   right: 0;
-  top: auto;
   height: 80vh;
   z-index: 1;
   overflow: visible;
   pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .hero--split .hero__image-slot img {
   width: 100%;
-  bottom: var(--spacing-40);
+  max-height: 100%;
   object-fit: contain;
-  object-position: center bottom;
+  object-position: center;
   display: block;
 }
 .hero--split .hero__image-slot > *:not(img) {
@@ -2310,7 +2318,7 @@
 .hero--centered {
   background-color: var(--hero-dark-bg);
   background-size: cover;
-  background-position: center top;
+  background-position: center;
   background-repeat: no-repeat;
   height: 100vh;
   display: flex;
@@ -2454,7 +2462,7 @@
 .hero--visuals .hero__text,
 .hero--minimal .hero__text {
   align-items: flex-start;
-  max-width: 846px;
+  max-width: var(--content-width-846);
 }
 .hero--visuals .hero__subtitle,
 .hero--minimal .hero__subtitle {
@@ -2496,6 +2504,7 @@
   width: 100%;
   height: 100%;
   object-fit: contain;
+  object-position: center;
 }
 .hero__visual--left {
   width: 160px;
@@ -2516,7 +2525,7 @@
 .hero--showcase {
   background-color: var(--hero-dark-bg);
   background-size: cover;
-  background-position: center top;
+  background-position: center;
   background-repeat: no-repeat;
   height: 100vh;
   display: flex;
@@ -2620,6 +2629,7 @@
   height: 100%;
   display: block;
   object-fit: contain;
+  object-position: center;
 }
 .hero--showcase .hero__floating-image {
   width: 100%;
@@ -2634,6 +2644,7 @@
   height: 100%;
   display: block;
   object-fit: cover;
+  object-position: center;
 }
 @media (min-width: 768px) {
   .hero__inner {
@@ -2719,7 +2730,7 @@
     padding: var(--spacing-48) var(--spacing-32);
   }
   .hero--split .hero__inner {
-    max-width: 1280px;
+    max-width: var(--content-width-1280);
     padding-top: var(--hero-primary-padding-top-desktop);
     padding-bottom: var(--spacing-96);
     padding-left: var(--spacing-32);
@@ -2752,7 +2763,7 @@
     width: 50%;
     height: calc(100% - 5px);
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: center;
     overflow: visible;
     pointer-events: none;
@@ -2764,7 +2775,7 @@
     max-height: none;
     max-width: none;
     object-fit: contain;
-    object-position: center top;
+    object-position: center;
   }
   .hero--split .hero__buttons {
     flex-direction: row;
@@ -2825,7 +2836,7 @@
   }
   .hero--visuals .hero__content,
   .hero--minimal .hero__content {
-    max-width: 846px;
+    max-width: var(--content-width-846);
     width: 100%;
   }
   .hero--showcase .hero__inner {
@@ -2883,9 +2894,9 @@
   box-sizing: border-box;
 }
 .stats__inner {
-  max-width: 1280px;
+  max-width: var(--content-width-1280);
   margin: 0 auto;
-  padding: var(--spacing-48) var(--spacing-16);
+  padding: var(--spacing-56) var(--spacing-16);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-24);
@@ -3013,6 +3024,7 @@
   width: 100px;
   height: 100px;
   object-fit: contain;
+  object-position: center;
 }
 .stats__awards-col {
   display: none;
@@ -3030,16 +3042,15 @@
   }
   .stats__inner {
     gap: var(--spacing-48);
-    padding: var(--spacing-48) var(--spacing-24);
   }
 }
 @media (min-width: 992px) {
   .stats__inner {
-    padding: var(--spacing-96) var(--spacing-32);
+    padding: var(--spacing-112) var(--spacing-24);
     gap: var(--spacing-80);
   }
   .stats__header {
-    max-width: 846px;
+    max-width: var(--content-width-846);
     margin-left: auto;
     margin-right: auto;
   }
@@ -3069,11 +3080,9 @@
     flex-shrink: 0;
     align-items: center;
   }
-  .stats__awards-col--left {
-    justify-content: flex-start;
-  }
+  .stats__awards-col--left,
   .stats__awards-col--right {
-    justify-content: flex-end;
+    justify-content: center;
   }
   .stats__awards-col .stats__award-image {
     width: 140px;
@@ -3084,36 +3093,44 @@
   }
 }
 
-/* templates/Scrollytelling/Scrollytelling.css */
+/* templates/FeatureScroll/FeatureScroll.css */
 :root {
-  --scrolly-bg: var(--color-slate-50);
-  --scrolly-text-primary: var(--color-slate-1200);
-  --scrolly-text-muted: var(--color-slate-500);
-  --scrolly-link-color: var(--color-coral-500);
-  --scrolly-link-hover: var(--color-coral-600);
-  --scrolly-media-bg: var(--color-slate-200);
-  --scrolly-header-size: var(--typography-h2-font-size);
-  --scrolly-header-lh: var(--typography-h2-line-height);
-  --scrolly-title-size: var(--typography-h3-font-size);
-  --scrolly-title-lh: var(--typography-h3-line-height);
-  --scrolly-body-size: var(--typography-body-md-font-size);
-  --scrolly-body-lh: var(--typography-body-md-line-height);
-  --scrolly-link-size: var(--typography-link-md-font-size);
-  --scrolly-link-lh: var(--typography-link-md-line-height);
-  --scrolly-col-gap: var(--spacing-112);
-  --scrolly-media-radius: var(--radius-2xl);
-  --scrolly-mobile-radius: var(--radius-2xl);
-  --scrolly-item-min-height: 60vh;
-  --scrolly-sticky-top: var(--spacing-80);
-}
-.scrolly {
+  --fs-bg: var(--color-slate-50);
+  --fs-text-primary: var(--color-slate-1200);
+  --fs-text-muted: var(--color-slate-500);
+  --fs-link-color: var(--color-coral-500);
+  --fs-link-hover: var(--color-coral-600);
+  --fs-media-bg: transparent;
+  --fs-font-family: var(--font-family-base);
+  --fs-header-family: var(--typography-h2-font-family);
+  --fs-header-size: var(--typography-h2-font-size);
+  --fs-header-weight: var(--typography-h2-font-weight);
+  --fs-header-lh: var(--typography-h2-line-height);
+  --fs-title-family: var(--typography-h3-font-family);
+  --fs-title-size: var(--typography-h3-font-size);
+  --fs-title-weight: var(--typography-h3-font-weight);
+  --fs-title-lh: var(--typography-h3-line-height);
+  --fs-body-family: var(--typography-body-md-font-family);
+  --fs-body-size: var(--typography-body-md-font-size);
+  --fs-body-weight: var(--typography-body-md-font-weight);
+  --fs-body-lh: var(--typography-body-md-line-height);
+  --fs-link-family: var(--typography-link-md-font-family);
+  --fs-link-size: var(--typography-link-md-font-size);
+  --fs-link-weight: var(--typography-link-md-font-weight);
+  --fs-link-lh: var(--typography-link-md-line-height);
+  --fs-col-gap: var(--spacing-112);
+  --fs-media-radius: var(--radius-2xl);
+  --fs-mobile-radius: var(--radius-2xl);
+  --fs-sticky-top: var(--spacing-80);
+}
+.fs {
   width: 100%;
-  background-color: var(--scrolly-bg);
-  font-family: var(--font-family-base);
+  background-color: var(--fs-bg);
+  font-family: var(--fs-font-family);
   box-sizing: border-box;
 }
-.scrolly__inner {
-  max-width: 1280px;
+.fs__inner {
+  max-width: var(--content-width-1280);
   margin: 0 auto;
   padding: var(--spacing-56) var(--spacing-16);
   display: flex;
@@ -3121,123 +3138,143 @@
   gap: var(--spacing-32);
   box-sizing: border-box;
 }
-.scrolly__header {
-  font-size: var(--scrolly-header-size);
-  font-weight: var(--font-weight-extra-bold);
-  line-height: var(--scrolly-header-lh);
-  color: var(--scrolly-text-primary);
+.fs__header {
+  font-family: var(--fs-header-family);
+  font-size: var(--fs-header-size);
+  font-weight: var(--fs-header-weight);
+  line-height: var(--fs-header-lh);
+  color: var(--fs-text-primary);
   margin: 0;
 }
-.scrolly__layout {
+.fs__layout {
   display: none;
 }
-.scrolly__mobile-list {
+.fs__mobile-list {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-48);
 }
-.scrolly__mobile-item {
+.fs__mobile-item {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
 }
-.scrolly__mobile-media {
+.fs__mobile-media {
   width: 100%;
   aspect-ratio: 1 / 1;
-  border-radius: var(--scrolly-mobile-radius);
-  background-color: var(--scrolly-media-bg);
+  border-radius: var(--fs-mobile-radius);
+  background-color: var(--fs-media-bg);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.scrolly__mobile-media img,
-.scrolly__mobile-media > * {
+.fs__mobile-media img,
+.fs__mobile-media > * {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: center;
   display: block;
 }
-.scrolly__item-title {
-  font-size: var(--scrolly-title-size);
-  font-weight: var(--font-weight-extra-bold);
-  line-height: var(--scrolly-title-lh);
-  color: var(--scrolly-text-primary);
+.fs__item-title {
+  font-family: var(--fs-title-family);
+  font-size: var(--fs-title-size);
+  font-weight: var(--fs-title-weight);
+  line-height: var(--fs-title-lh);
+  color: var(--fs-text-primary);
   margin: 0;
 }
-.scrolly__item-desc {
-  font-size: var(--scrolly-body-size);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--scrolly-body-lh);
-  color: var(--scrolly-text-primary);
+.fs__item-desc {
+  font-family: var(--fs-body-family);
+  font-size: var(--fs-body-size);
+  font-weight: var(--fs-body-weight);
+  line-height: var(--fs-body-lh);
+  color: var(--fs-text-muted);
   margin: 0;
 }
-.scrolly__item-link {
+.fs__item-link {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-8);
-  font-size: var(--scrolly-link-size);
-  font-weight: var(--font-weight-semi-bold);
-  line-height: var(--scrolly-link-lh);
-  color: var(--scrolly-link-color);
+  font-family: var(--fs-link-family);
+  font-size: var(--fs-link-size);
+  font-weight: var(--fs-link-weight);
+  line-height: var(--fs-link-lh);
+  color: var(--fs-link-color);
   text-decoration: none;
   transition: color 0.2s ease;
   cursor: pointer;
 }
-.scrolly__item-link:hover {
-  color: var(--scrolly-link-hover);
+.fs__item-link:hover {
+  color: var(--fs-link-hover);
 }
-.scrolly__item-link-icon {
+.fs__item-link-icon {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
   transition: transform 0.2s ease;
 }
-.scrolly__item-link:hover .scrolly__item-link-icon {
+.fs__item-link:hover .fs__item-link-icon {
   transform: translateX(var(--spacing-4));
 }
 @media (min-width: 768px) {
-  .scrolly__inner {
+  .fs__inner {
     padding: var(--spacing-56) var(--spacing-24);
     gap: var(--spacing-40);
   }
 }
 @media (min-width: 992px) {
-  .scrolly__header {
+  .fs__header {
     text-align: center;
   }
-  .scrolly__inner {
+  .fs__inner {
     padding: var(--spacing-112) var(--spacing-24);
     gap: var(--spacing-56);
   }
-  .scrolly__layout {
+  .fs__layout {
     display: flex;
     flex-direction: row;
-    gap: var(--scrolly-col-gap);
+    gap: var(--fs-col-gap);
     align-items: flex-start;
     width: 100%;
+    --fs-step-band: calc(100svh - var(--fs-sticky-top));
   }
-  .scrolly__mobile-list {
+  .fs__mobile-list {
     display: none;
   }
-  .scrolly--media-left .scrolly__layout {
+  .fs--media-left .fs__layout {
     flex-direction: row-reverse;
   }
-  .scrolly__media-col {
+  .fs__media-col {
     flex: 1 0 0;
+    min-width: 0;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+  .fs__media-sticky {
+    flex: 0 0 auto;
+    width: 100%;
     position: sticky;
-    top: var(--scrolly-sticky-top);
-    align-self: flex-start;
+    top: var(--fs-sticky-top);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+    min-height: var(--fs-step-band);
+    box-sizing: border-box;
   }
-  .scrolly__media-wrap {
+  .fs__media-wrap {
     width: 100%;
     aspect-ratio: 1 / 1;
     position: relative;
-    border-radius: var(--scrolly-media-radius);
-    background-color: var(--scrolly-media-bg);
+    border-radius: var(--fs-media-radius);
+    background-color: var(--fs-media-bg);
     overflow: hidden;
   }
-  .scrolly__media-item {
+  .fs__media-item {
     position: absolute;
     inset: 0;
     opacity: 0;
@@ -3247,42 +3284,38 @@
     align-items: center;
     justify-content: center;
   }
-  .scrolly__media-item--active {
+  .fs__media-item--active {
     opacity: 1;
   }
-  .scrolly__media-item img {
+  .fs__media-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    object-position: center;
     display: block;
   }
-  .scrolly__media-item > * {
+  .fs__media-item > * {
     width: 100% !important;
     height: 100% !important;
   }
-  .scrolly__content-col {
+  .fs__content-col {
     flex: 1 0 0;
+    min-width: 0;
     display: flex;
     flex-direction: column;
+    gap: 0;
   }
-  .scrolly__item {
+  .fs__item {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    min-height: var(--scrolly-item-min-height);
+    flex-shrink: 0;
+    margin: 0;
+    min-height: var(--fs-step-band);
     gap: var(--spacing-24);
     padding-left: var(--spacing-32);
-    transition: opacity 0.4s ease;
-    opacity: 0.4;
     box-sizing: border-box;
   }
-  .scrolly__item--active {
-    opacity: 1;
-  }
-  .scrolly__item--inactive .scrolly__item-desc,
-  .scrolly__item--inactive .scrolly__item-title {
-    color: var(--scrolly-text-muted);
-  }
 }
 
 /* templates/StickyStackedCards/StickyStackedCards.css */
@@ -3319,7 +3352,7 @@
   box-sizing: border-box;
 }
 .ssc__inner {
-  max-width: 1280px;
+  max-width: var(--content-width-1280);
   margin: 0 auto;
   padding: var(--spacing-56) var(--spacing-16);
   display: flex;
@@ -3392,6 +3425,7 @@
   height: var(--ssc-img-height-mobile);
   flex-shrink: 0;
   overflow: hidden;
+  background-color: transparent;
 }
 .ssc__card-image img {
   position: absolute;
@@ -3399,6 +3433,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: center;
   display: block;
 }
 @media (min-width: 768px) {
@@ -3425,7 +3460,7 @@
     min-height: var(--ssc-card-min-height);
   }
   .ssc__card-content {
-    padding: var(--spacing-56) var(--spacing-24);
+    padding: var(--spacing-32);
     justify-content: flex-start;
     align-self: stretch;
   }
@@ -3438,7 +3473,7 @@
 
 /* templates/CTABanner/CTABanner.css */
 :root {
-  --ctab-max-width: 80rem;
+  --ctab-max-width: var(--content-width-1280);
   --ctab-stage-height: calc(11 * var(--ctab-grid-cell));
   --ctab-hero-max-width: 90%;
   --ctab-avatar-radius: var(--radius-xl);
@@ -3464,7 +3499,7 @@
 @media (min-width: 992px) {
   :root {
     --ctab-stage-height: 42.5rem;
-    --ctab-hero-max-width: 52.875rem;
+    --ctab-hero-max-width: var(--content-width-846);
     --ctab-avatar-radius: var(--radius-2xl);
     --ctab-grid-cell: 6rem;
     --ctab-avatar-size: 6rem;
@@ -3597,6 +3632,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: center;
   display: block;
   border-radius: var(--ctab-avatar-radius);
 }
@@ -3722,7 +3758,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-8);
-  padding: var(--spacing-8);
+  padding: var(--spacing-8) var(--spacing-12);
   height: 2.5rem;
   border: none;
   border-radius: var(--radius-full);
@@ -3942,6 +3978,7 @@
   display: flex;
   flex: 1;
   min-width: 0;
+  min-height: 22.8rem;
   overflow: hidden;
 }
 .navbar__dropdown-left {
@@ -4386,9 +4423,6 @@
 
 /* templates/DayNightTransition/DayNightTransition.css */
 :root {
-  --dnt-headline-size: var(--typography-h2-font-size);
-  --dnt-headline-lh: var(--typography-h2-line-height);
-  --dnt-headline-weight: var(--typography-h2-font-weight);
   --dnt-text-day: var(--color-slate-1400);
   --dnt-text-night: var(--color-slate-50);
   --dnt-btn-bg: var(--color-coral-500);
@@ -4401,7 +4435,7 @@
   --dnt-btn-lh: var(--line-height-xs);
   --dnt-btn-weight: var(--font-weight-extra-bold);
   --dnt-wrapper-height: 250vh;
-  --dnt-content-max-width: 37.5rem;
+  --dnt-text-max-width: 37.5rem;
   --dnt-content-py: var(--spacing-56);
   --dnt-content-px: var(--spacing-16);
   --dnt-desc-size: var(--typography-body-md-font-size);
@@ -4434,7 +4468,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  object-position: center;
+  object-position: bottom;
   display: block;
   pointer-events: none;
 }
@@ -4458,11 +4492,17 @@
     align-items: center;
   }
 }
+.dnt__inner {
+  width: 100%;
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  box-sizing: border-box;
+}
 .dnt__text-wrap {
   display: flex;
   flex-direction: column;
   gap: var(--dnt-gap);
-  max-width: var(--dnt-content-max-width);
+  max-width: var(--dnt-text-max-width);
 }
 .dnt__crossfade-wrap {
   display: grid;
@@ -4473,10 +4513,10 @@
 }
 .dnt__headline {
   margin: 0;
-  font-family: var(--font-family-base);
-  font-size: var(--dnt-headline-size);
-  font-weight: var(--dnt-headline-weight);
-  line-height: var(--dnt-headline-lh);
+  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);
 }
 .dnt__description {
   margin: 0;
@@ -4490,6 +4530,7 @@
   align-items: center;
   justify-content: center;
   align-self: flex-start;
+  width: auto;
   padding: var(--dnt-btn-py) var(--dnt-btn-px);
   background-color: var(--dnt-btn-bg);
   color: var(--dnt-btn-text);
@@ -4515,9 +4556,9 @@
   --lm-section-py: var(--spacing-112);
   --lm-section-px: var(--spacing-24);
   --lm-section-height: 50rem;
-  --lm-max-width: 80rem;
+  --lm-max-width: var(--content-width-1280);
   --lm-layout-gap: var(--spacing-112);
-  --lm-card-bg: var(--color-slate-1100);
+  --lm-card-bg: transparent;
   --lm-card-radius: var(--radius-lg);
   --lm-card-radius-mobile: var(--radius-2xl);
   --lm-card-px: var(--spacing-16);
@@ -4733,9 +4774,12 @@
   overflow: hidden;
 }
 .lm__card-img-wrap img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  max-width: 90%;
+  max-height: 90%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  object-position: center;
   display: block;
 }
 
@@ -4809,7 +4853,7 @@
   box-sizing: border-box;
 }
 .steps__container {
-  max-width: 1280px;
+  max-width: var(--content-width-1280);
   margin: 0 auto;
   padding: var(--spacing-56) var(--spacing-16);
   display: flex;
@@ -4834,7 +4878,7 @@
   border-radius: var(--radius-2xl);
   overflow: hidden;
   flex-shrink: 0;
-  background-color: var(--color-slate-100);
+  background-color: transparent;
 }
 @media (min-width: 992px) {
   .steps__image-wrapper {
@@ -4846,6 +4890,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: center;
   display: block;
 }
 .steps__content {
@@ -4904,10 +4949,10 @@
   gap: var(--spacing-4);
 }
 .steps__item-title {
-  font-family: var(--font-family-base);
-  font-size: var(--typography-body-lg-font-size);
-  font-weight: var(--font-weight-extra-bold);
-  line-height: var(--typography-body-lg-line-height);
+  font-family: var(--typography-h5-font-family);
+  font-size: var(--typography-h5-font-size);
+  font-weight: var(--typography-h5-font-weight);
+  line-height: var(--typography-h5-line-height);
   color: var(--steps-item-title-color);
   margin: 0;
 }
@@ -4950,7 +4995,7 @@
   background-color: var(--db-section-bg-dark);
 }
 .db-container {
-  max-width: 1280px;
+  max-width: var(--content-width-1280);
   margin: 0 auto;
   padding: var(--spacing-56) var(--spacing-16);
   box-sizing: border-box;
@@ -5007,6 +5052,7 @@
   width: 128px;
   height: 128px;
   object-fit: contain;
+  object-position: center;
   display: none;
   flex-shrink: 0;
 }
@@ -5101,7 +5147,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
-    align-content: flex-end;
+    align-content: center;
     align-items: center;
   }
   .db-badges .download-badge {