/* How Vidim Hepls — 63:2908 · 1512 x 1020
   (il nome del layer contiene il refuso "Hepls", riportato dalla spec)
   Larghezza: 40 + 696 + 40 + 696 + 40 = 1512
   Altezza:   160 + 700 + 160 = 1020 */

.how {
  width: var(--page-width);
  padding: var(--space-7) var(--page-gutter);   /* 160 verticale / 40 orizzontale */
  background: var(--color-white);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5);                          /* 40 */
}

/* --- Colonna sinistra: Immagine I63:2908;123:2993 — 696 x 700 ------------- */
.how__media {
  flex: 1 0 0;
  min-width: 0;
  height: 700px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Il fill immagine e scalato al 174.63% della larghezza del box, ancorato a
   left 0 / top 0, height 100% -> il lato destro esce dal box ed e tagliato. */
.how__media-img {
  width: 174.63%;
  height: 100%;
}

/* --- Colonna destra: Container I63:2908;63:2826 — 696 x 700 --------------- */
.how__col {
  flex: 1 0 0;
  min-width: 0;
  height: 700px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;   /* 265 (Text) + 248 + 187 (Card) = 700 */
}

/* Text I63:2908;63:2827 — 696 x 265, column, gap 16 */
.how__text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);              /* 16 */
}

/* H2 I63:2908;63:2828 — box 696 x 116 */
.how__h2 {
  width: 100%;
  color: var(--text-on-light);
  text-align: left;
}

/* Paragrafo I63:2908;63:2829 — box 696 x 133 */
.how__para {
  width: 100%;
  color: var(--text-on-light-muted);
  text-align: left;
  white-space: pre-wrap;
}

/* --- Componente How Card — master 24:942, variante Step=01 ----------------
   696 x 187, figli in posizionamento assoluto (non auto-layout).
--------------------------------------------------------------------------- */
.how-card {
  position: relative;
  width: 100%;
  height: 187px;
  background: var(--gradient-card-how);   /* 102.235deg, #29384d -> #00122b */
  border-radius: var(--radius-lg);
  overflow: clip;                          /* il numero decorativo sborda a sinistra */
  flex: none;
}

/* Numero decorativo 24:940 — box 175 x 116 a x -40 / y 71 (bordo inferiore = 187) */
.how-card__num {
  position: absolute;
  left: -40px;
  top: 71px;
  width: 175px;
  color: var(--color-white);
  opacity: .25;
  white-space: nowrap;
  text-align: left;
}

/* Text01 / Text02 / Text03 — stesso container: 516 px a left 160,
   centrato verticalmente con offset proprio per blocco. */
.how-card__text {
  position: absolute;
  left: 160px;                      /* 160 + 516 = 676 -> 20 px di margine a destra */
  width: 516px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);              /* 16 */
  transform: translateY(-50%);
}

.how-card__text--01 { top: 50%;                opacity: 1; }  /* 24:937  — visibile */
.how-card__text--02 { top: calc(50% + 20px);   opacity: 0; }  /* 24:955  — opacity 0 in Step=01 */
.how-card__text--03 { top: calc(50% - 20px);   opacity: 0; }  /* 63:2869 — opacity 0 in Step=01 */

/* Titoli 24:938 / 24:956 / 63:2870 — 28/34, Neutrals/50 */
.how-card__title {
  width: 100%;
  color: var(--text-on-dark);
  text-align: left;
}

/* Body 24:939 / 24:957 / 63:2871 — 16/19, Neutrals/300 */
.how-card__body {
  width: 100%;
  color: var(--text-on-dark-muted);
  text-align: left;
}