@deriv-web-design/ui 0.1.14 → 0.1.15

package/dist/index.css

@@ -7118,6 +7118,8 @@
 
 /* templates/ImageBanner/ImageBanner.css */
 .image-banner {
+  --image-banner-chip-bg: rgba(255, 255, 255, 0.16);
+  --image-banner-chip-border: rgba(0, 0, 0, 0.08);
   width: 100%;
   font-family: var(--font-family-base);
   box-sizing: border-box;
@@ -7128,6 +7130,19 @@
     padding: var(--spacing-112) var(--spacing-24);
   }
 }
+.image-banner--chips {
+  padding: var(--spacing-56) var(--spacing-16);
+}
+@media (min-width: 768px) {
+  .image-banner--chips {
+    padding: var(--spacing-56) var(--spacing-24);
+  }
+}
+@media (min-width: 992px) {
+  .image-banner--chips {
+    padding: var(--spacing-112) var(--spacing-24);
+  }
+}
 .image-banner__inner {
   position: relative;
   display: flex;
@@ -7144,6 +7159,14 @@
     border-radius: var(--radius-2xl);
   }
 }
+.image-banner__inner--chips-left,
+.image-banner__inner--chips-right {
+  border-radius: var(--radius-3xl);
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: stretch;
+}
 .image-banner__inner--split-left .image-banner__content {
   order: 1;
 }
@@ -7156,6 +7179,14 @@
 .image-banner__inner--split-right .image-banner__image-wrapper {
   order: 1;
 }
+.image-banner__inner--chips-left .image-banner__content,
+.image-banner__inner--chips-right .image-banner__content {
+  order: 1;
+}
+.image-banner__inner--chips-left .image-banner__image-wrapper,
+.image-banner__inner--chips-right .image-banner__image-wrapper {
+  order: 2;
+}
 @media (min-width: 992px) {
   .image-banner__inner--split-left,
   .image-banner__inner--split-right {
@@ -7165,6 +7196,32 @@
   .image-banner__inner--split-right {
     justify-content: flex-end;
   }
+  .image-banner__inner--chips-left,
+  .image-banner__inner--chips-right {
+    grid-template-columns: 1fr 1fr;
+  }
+  .image-banner__inner--chips-left .image-banner__content,
+  .image-banner__inner--chips-left .image-banner__image-wrapper,
+  .image-banner__inner--chips-right .image-banner__content,
+  .image-banner__inner--chips-right .image-banner__image-wrapper {
+    order: unset;
+  }
+  .image-banner__inner--chips-left .image-banner__content {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  .image-banner__inner--chips-left .image-banner__image-wrapper {
+    grid-column: 2;
+    grid-row: 1;
+  }
+  .image-banner__inner--chips-right .image-banner__image-wrapper {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  .image-banner__inner--chips-right .image-banner__content {
+    grid-column: 2;
+    grid-row: 1;
+  }
 }
 .image-banner__inner--full-bg-left,
 .image-banner__inner--full-bg-right {
@@ -7194,6 +7251,24 @@
   position: relative;
   z-index: 1;
 }
+.image-banner__inner--chips-left .image-banner__content,
+.image-banner__inner--chips-right .image-banner__content {
+  gap: var(--spacing-24);
+  padding: var(--spacing-32);
+  justify-content: center;
+  align-items: flex-start;
+  text-align: left;
+}
+@media (min-width: 992px) {
+  .image-banner__inner--chips-left .image-banner__content,
+  .image-banner__inner--chips-right .image-banner__content {
+    padding: var(--spacing-56);
+  }
+}
+.image-banner__inner--chips-left .image-banner__chips,
+.image-banner__inner--chips-right .image-banner__chips {
+  justify-content: flex-start;
+}
 .image-banner__inner--split-right .image-banner__content,
 .image-banner__inner--full-bg-right .image-banner__content {
   align-items: flex-end;
@@ -7226,6 +7301,17 @@
   .image-banner__inner--full-bg-right .image-banner__content {
     align-self: flex-end;
   }
+  .image-banner__inner--chips-left .image-banner__content,
+  .image-banner__inner--chips-right .image-banner__content {
+    width: auto;
+  }
+  .image-banner__inner--chips-right .image-banner__content {
+    align-items: flex-end;
+    text-align: right;
+  }
+  .image-banner__inner--chips-right .image-banner__chips {
+    justify-content: flex-end;
+  }
 }
 .image-banner__title {
   font-family: var(--typography-h2-font-family);
@@ -7235,6 +7321,14 @@
   color: var(--color-slate-50);
   margin: 0;
 }
+.image-banner__inner--chips-left .image-banner__title,
+.image-banner__inner--chips-right .image-banner__title {
+  font-family: var(--typography-h4-font-family);
+  font-size: var(--typography-h4-font-size);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--typography-h4-line-height);
+  letter-spacing: -0.015rem;
+}
 .image-banner__description {
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
@@ -7244,11 +7338,50 @@
   margin: 0;
   max-width: 42ch;
 }
+.image-banner__inner--chips-left .image-banner__description,
+.image-banner__inner--chips-right .image-banner__description {
+  max-width: 36ch;
+}
 .image-banner__actions {
   display: flex;
   align-items: center;
   padding-top: var(--spacing-8);
 }
+.image-banner__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-8);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+.image-banner__chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-8);
+  margin: 0;
+  padding: calc(var(--spacing-4) + var(--spacing-2)) var(--spacing-12);
+  border-radius: var(--radius-full);
+  background-color: var(--image-banner-chip-bg);
+  border: 1px solid var(--image-banner-chip-border);
+  box-sizing: border-box;
+  color: var(--color-slate-50);
+}
+.image-banner__chip-icon {
+  display: block;
+  flex-shrink: 0;
+  width: 11px;
+  height: 12px;
+}
+.image-banner__chip-label {
+  font-family: var(--typography-body-sm-font-family);
+  font-size: var(--typography-body-sm-font-size);
+  font-weight: var(--typography-body-sm-font-weight);
+  line-height: var(--typography-body-sm-line-height);
+  white-space: nowrap;
+}
 .image-banner__image-wrapper {
   position: relative;
   width: 100%;
@@ -7256,6 +7389,13 @@
   overflow: hidden;
   flex-shrink: 0;
 }
+.image-banner__inner--chips-left .image-banner__image-wrapper,
+.image-banner__inner--chips-right .image-banner__image-wrapper {
+  aspect-ratio: unset;
+  min-height: 0;
+  overflow: hidden;
+  height: auto;
+}
 @media (min-width: 992px) {
   .image-banner__image-wrapper {
     position: absolute;
@@ -7270,6 +7410,19 @@
   .image-banner__inner--split-right .image-banner__image-wrapper {
     left: 0;
   }
+  .image-banner__inner--chips-left,
+  .image-banner__inner--chips-right {
+    align-items: stretch;
+  }
+  .image-banner__inner--chips-left .image-banner__image-wrapper,
+  .image-banner__inner--chips-right .image-banner__image-wrapper {
+    position: relative;
+    width: 100%;
+    height: auto;
+    min-height: 0;
+    aspect-ratio: unset;
+    align-self: start;
+  }
 }
 .image-banner__image {
   position: absolute;
@@ -7280,6 +7433,36 @@
   object-position: center top;
   display: block;
 }
+.image-banner__inner--chips-left .image-banner__image,
+.image-banner__inner--chips-right .image-banner__image {
+  position: static;
+  inset: unset;
+  width: 100%;
+  height: auto;
+  object-fit: unset;
+  object-position: unset;
+  display: block;
+}
+.image-banner__image-fade {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--spacing-32);
+  pointer-events: none;
+  z-index: 1;
+  background:
+    linear-gradient(
+      to bottom,
+      var(--color-slate-1200) 0%,
+      transparent 100%);
+}
+@media (min-width: 992px) {
+  .image-banner__image-fade {
+    display: none;
+  }
+}
 .image-banner__bg-image-wrapper {
   position: absolute;
   inset: 0;
@@ -10399,4 +10582,616 @@
 .fo-linkWrap {
   margin-top: var(--spacing-24);
 }
+
+/* templates/Tiers/Tiers.css */
+:root {
+  --tiers-bg: var(--color-slate-75);
+  --tiers-title-color: var(--text-primary);
+  --tiers-desc-color: var(--text-secondary);
+  --tiers-shell-bg: var(--color-slate-50);
+  --tiers-shell-radius: var(--radius-2xl);
+  --tiers-name-color: var(--text-primary);
+  --tiers-status-color: var(--text-secondary);
+  --tiers-card-bg: var(--color-slate-75);
+  --tiers-card-radius: var(--radius-xl);
+  --tiers-card-title-color: var(--text-primary);
+  --tiers-card-desc-color: var(--text-secondary);
+  --tiers-requirement-color: var(--text-primary);
+  --tiers-icon-size: var(--spacing-48);
+  --tiers-line-bronze: var(--color-yellow-600);
+  --tiers-line-silver: var(--color-slate-200);
+  --tiers-line-gold: var(--color-yellow-500);
+  --tiers-line-platinum: var(--color-slate-300);
+  --tiers-line-fade: var(--tiers-bg);
+}
+.tiers {
+  width: 100%;
+  background-color: var(--tiers-bg);
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+}
+.tiers__container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-32);
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  box-sizing: border-box;
+}
+@media (min-width: 768px) {
+  .tiers__container {
+    align-items: center;
+    gap: var(--spacing-48);
+    padding: var(--spacing-56) var(--spacing-24);
+  }
+}
+@media (min-width: 992px) {
+  .tiers__container {
+    gap: var(--spacing-64);
+    padding: var(--spacing-112) var(--spacing-24);
+  }
+}
+.tiers__header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  text-align: left;
+  max-width: 48rem;
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .tiers__header {
+    align-items: center;
+    text-align: center;
+  }
+}
+.tiers__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(--tiers-title-color);
+  margin: 0;
+}
+.tiers__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(--tiers-desc-color);
+  margin: 0;
+}
+.tiers__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-16);
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .tiers__list {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--spacing-32);
+  }
+}
+@media (min-width: 992px) {
+  .tiers__list {
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--spacing-24);
+  }
+}
+.tiers__item {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+}
+.tiers__shell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-24);
+  background-color: var(--tiers-shell-bg);
+  border-radius: var(--tiers-shell-radius);
+  box-sizing: border-box;
+}
+@media (min-width: 768px) {
+  .tiers__shell {
+    align-items: center;
+    gap: var(--spacing-24);
+    padding: 0 0 var(--spacing-32) 0;
+    background-color: transparent;
+    border-radius: 0;
+  }
+}
+.tiers__icon-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: auto;
+  flex-shrink: 0;
+}
+@media (min-width: 768px) {
+  .tiers__icon-row {
+    justify-content: center;
+    width: 100%;
+  }
+}
+@media (min-width: 992px) {
+  .tiers__icon-row {
+    width: calc(100% + var(--spacing-24));
+    margin-left: calc(var(--spacing-24) / -2);
+    margin-right: calc(var(--spacing-24) / -2);
+  }
+}
+.tiers__icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tiers-icon-size);
+  height: var(--tiers-icon-size);
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+@media (min-width: 768px) {
+  .tiers__icon-wrap {
+    --tiers-icon-size: var(--spacing-64);
+    width: var(--tiers-icon-size);
+    height: var(--tiers-icon-size);
+    background-color: var(--tiers-bg);
+    border-radius: var(--radius-full);
+  }
+}
+.tiers__icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.tiers__line {
+  display: none;
+  flex: 1 1 0;
+  height: 2px;
+  min-width: 0;
+  pointer-events: none;
+}
+@media (min-width: 992px) {
+  .tiers__line {
+    display: block;
+  }
+}
+.tiers__item--bronze .tiers__line--left {
+  background-image:
+    linear-gradient(
+      270deg,
+      var(--tiers-line-bronze),
+      var(--tiers-line-fade));
+}
+.tiers__item--bronze .tiers__line--right {
+  background-color: var(--tiers-line-bronze);
+}
+.tiers__item--silver .tiers__line--left {
+  background-image:
+    linear-gradient(
+      90deg,
+      var(--tiers-line-bronze),
+      var(--tiers-line-silver) 39%);
+}
+.tiers__item--silver .tiers__line--right {
+  background-color: var(--tiers-line-silver);
+}
+.tiers__item--gold .tiers__line--left {
+  background-image:
+    linear-gradient(
+      90deg,
+      var(--tiers-line-silver),
+      var(--tiers-line-gold));
+}
+.tiers__item--gold .tiers__line--right {
+  background-color: var(--tiers-line-gold);
+}
+.tiers__item--platinum .tiers__line--left {
+  background-image:
+    linear-gradient(
+      90deg,
+      var(--tiers-line-gold),
+      var(--tiers-line-platinum) 39%);
+}
+.tiers__item--platinum .tiers__line--right {
+  background-image:
+    linear-gradient(
+      90deg,
+      var(--tiers-line-platinum),
+      var(--tiers-line-fade));
+}
+.tiers__heading {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-8);
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .tiers__heading {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: var(--spacing-4);
+  }
+}
+.tiers__name {
+  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(--tiers-name-color);
+  margin: 0;
+}
+.tiers__status {
+  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(--tiers-status-color);
+  margin: 0;
+}
+.tiers__card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-8);
+  width: 100%;
+  min-height: 0;
+  padding: var(--spacing-24);
+  background-color: var(--tiers-card-bg);
+  border-radius: var(--tiers-card-radius);
+  box-sizing: border-box;
+  text-align: left;
+  flex: 1 1 auto;
+}
+@media (min-width: 768px) {
+  .tiers__card {
+    --tiers-card-bg: var(--color-slate-50);
+    align-items: center;
+    text-align: center;
+    min-height: 11.5rem;
+    gap: var(--spacing-16);
+  }
+}
+.tiers__card-title {
+  font-family: var(--typography-body-lg-font-family);
+  font-size: var(--typography-body-lg-font-size);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--typography-body-lg-line-height);
+  color: var(--tiers-card-title-color);
+  margin: 0;
+  width: 100%;
+}
+.tiers__card-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(--tiers-card-desc-color);
+  margin: 0;
+  width: 100%;
+}
+.tiers__card-description strong {
+  font-weight: var(--font-weight-semi-bold);
+  color: var(--tiers-card-title-color);
+}
+.tiers__requirement {
+  font-family: var(--typography-body-sm-font-family);
+  font-size: var(--typography-body-sm-font-size);
+  font-weight: var(--typography-body-sm-font-weight);
+  line-height: var(--typography-body-sm-line-height);
+  color: var(--tiers-requirement-color);
+  margin: 0;
+  width: 100%;
+  text-align: left;
+  white-space: pre-line;
+}
+@media (min-width: 768px) {
+  .tiers__requirement {
+    text-align: center;
+    padding: 0 var(--spacing-16);
+  }
+}
+.tiers__footer {
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .tiers__footer {
+    justify-content: center;
+  }
+}
+
+/* templates/PartnersPayout/PartnersPayout.css */
+:root {
+  --partners-payout-bg: var(--color-slate-1200);
+  --partners-payout-text: var(--color-slate-50);
+  --partners-payout-border: var(--color-opacity-white-16);
+  --partners-payout-card-radius: var(--radius-xl);
+}
+.partners-payout {
+  width: 100%;
+  background-color: var(--partners-payout-bg);
+  color: var(--partners-payout-text);
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+}
+.partners-payout__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-32);
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.partners-payout__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  width: 100%;
+}
+.partners-payout__header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-8);
+  width: 100%;
+  text-align: left;
+}
+.partners-payout__title {
+  margin: 0;
+  color: var(--partners-payout-text);
+  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);
+}
+.partners-payout__period,
+.partners-payout__region,
+.partners-payout__amount {
+  margin: 0;
+  color: var(--partners-payout-text);
+  font-family: var(--typography-body-sm-font-family);
+  font-size: var(--typography-body-sm-font-size);
+  font-weight: var(--typography-body-sm-font-weight);
+  line-height: var(--typography-body-sm-line-height);
+}
+.partners-payout__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-8);
+  width: 100%;
+  margin: 0;
+  padding: var(--spacing-24) 0 0;
+  list-style: none;
+  box-sizing: border-box;
+}
+.partners-payout__item {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-16);
+  padding: var(--spacing-16);
+  border: 1px solid var(--partners-payout-border);
+  border-radius: var(--partners-payout-card-radius);
+  box-sizing: border-box;
+}
+.partners-payout__region,
+.partners-payout__amount {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.partners-payout__image {
+  display: block;
+  width: 100%;
+  max-width: 80%;
+  height: auto;
+  object-fit: contain;
+}
+@media (min-width: 768px) {
+  .partners-payout__container {
+    gap: var(--spacing-48);
+    padding: var(--spacing-56) var(--spacing-24);
+  }
+  .partners-payout__content {
+    align-items: center;
+    gap: var(--spacing-48);
+  }
+  .partners-payout__header {
+    align-items: center;
+    text-align: center;
+  }
+  .partners-payout__grid {
+    grid-template-columns: repeat(2, 1fr);
+    width: fit-content;
+    max-width: 100%;
+    padding-top: 0;
+  }
+  .partners-payout__item {
+    padding: var(--spacing-16) var(--spacing-24);
+  }
+}
+@media (min-width: 992px) {
+  .partners-payout__container {
+    padding: var(--spacing-112) var(--spacing-24);
+  }
+}
+
+/* templates/MasterPartner/MasterPartner.css */
+:root {
+  --master-partner-bg: var(--color-slate-50);
+  --master-partner-title-color: var(--text-primary);
+  --master-partner-text-color: var(--text-primary);
+  --master-partner-step-desc-color: var(--text-primary);
+  --master-partner-image-radius: var(--radius-2xl);
+}
+.master-partner {
+  width: 100%;
+  background-color: var(--master-partner-bg);
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+}
+.master-partner__container {
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-40);
+  box-sizing: border-box;
+}
+@media (min-width: 768px) {
+  .master-partner__container {
+    padding: var(--spacing-56) var(--spacing-24);
+  }
+}
+@media (min-width: 992px) {
+  .master-partner__container {
+    gap: var(--spacing-64);
+    padding: var(--spacing-112) var(--spacing-24);
+  }
+}
+.master-partner__top {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-32);
+  width: 100%;
+}
+@media (min-width: 992px) {
+  .master-partner__top {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-64);
+  }
+}
+.master-partner__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-24);
+  width: 100%;
+}
+@media (min-width: 992px) {
+  .master-partner__content {
+    flex: 1 1 0;
+    width: auto;
+  }
+}
+.master-partner__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(--master-partner-title-color);
+  margin: 0;
+}
+.master-partner__copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  width: 100%;
+}
+.master-partner__paragraph {
+  font-family: var(--font-family-base);
+  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(--master-partner-text-color);
+  margin: 0;
+}
+.master-partner__paragraph strong {
+  font-weight: var(--font-weight-extra-bold);
+}
+.master-partner__cta {
+  display: none;
+  width: 100%;
+}
+@media (min-width: 992px) {
+  .master-partner__cta {
+    display: block;
+  }
+}
+.master-partner__image-wrapper {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--master-partner-image-radius);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+@media (min-width: 992px) {
+  .master-partner__image-wrapper {
+    flex: 1 1 0;
+    width: auto;
+  }
+}
+.master-partner__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  display: block;
+}
+.master-partner__steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-32);
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .master-partner__steps {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--spacing-32) var(--spacing-24);
+  }
+}
+@media (min-width: 992px) {
+  .master-partner__steps {
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--spacing-24);
+  }
+}
+.master-partner__step {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-12);
+  min-width: 0;
+}
+.master-partner__step-icon {
+  display: block;
+  width: var(--spacing-32);
+  height: var(--spacing-32);
+  flex-shrink: 0;
+}
+.master-partner__step-description {
+  font-family: var(--font-family-base);
+  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(--master-partner-step-desc-color);
+  margin: 0;
+}
 /*# sourceMappingURL=index.css.map */