.hero {
  display: flex;
  align-items: center;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);

  padding: 2rem 3rem;
  border-radius: 20px;
  margin: 3rem auto;
  max-width: 900px;
}

/* FOTO */
.hero-photo {
  width: 180px;
  border-radius: 50%;
  margin-right: 2rem;     /* empuja el divisor */
  flex-shrink: 0;         /* evita que se mueva */
}

/* DIVISOR */
.hero-divider {
  width: 1px;
  height: 260px;          /* MÁS LARGO */
  background: rgba(255, 255, 255, 0.3);
  margin-right: 2rem;     /* separa del texto */
}

/* TEXTO */
.hero-text {
  font-size: 1rem;
  opacity: 0.8;
  line-height: 1.6;
}

/* resize images to fit inside card rather than cropping */
/* to use, put a <div class="fit-images-in-card"> around the card container (e.g. 'cards' or "children') & has local effect */
/* might need to put "display:flex; align-items:center;" on .fit-images-in-card .card-container .card-image */
.fit-images-in-card .card-container .card-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}