.hero-ft {
  background-image: url('hero-about-640.webp');  
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

/* Larger tablets and small laptops */
@media (min-width: 768px) {
  .hero-ft {
    background-image: url('hero-about-1024.webp');
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .hero-ft {
    background-image: url('hero-about-1440.webp');
  }
}

/* Large and hi-res displays */
@media (min-width: 1600px) {
  .hero-ft {
    background-image: url('hero-about-1920.webp');
  }
}


.hero {
  min-height: 70vh;
}

.hero::before {
  background-position: center;
}

.hero::before {
  background-image: url('hero-about-640.webp');  
}

@media (min-width:640px) {
  .hero {
    min-height: 70vh; 
    align-items: flex-end;
  }
}

@media (min-width: 768px) {
  .hero::before {
    background-image: url('hero-about-1024.webp');
  }
  }
  
  /* Desktop */
  @media (min-width: 1200px) {
  .hero::before {
    background-image: url('hero-about-1440.webp');
  }
  }
  
  /* Large and hi-res displays */
  @media (min-width: 1600px) {
  .hero::before {
    background-image: url('hero-about-1920.webp');
  }
  }

  .hero::after {
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.0),
    rgba(96, 59, 42, 0.22)
  );
  }


.portrait-block {
  margin-bottom: var(--space-lg) auto;  
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  max-width: 26rem;
}

/* Portrait image styling */
.portrait-block img {
  display: block; 
  height: auto;
  max-width: 42rem;
  object-fit: cover;             /* crop left/right as needed */
  width: 100%;
  object-position: 60% 25%;     
  aspect-ratio: 3 / 4;  
  
}