ImageHero image

---
interface Props {
  src?: string;
  alt?: string;
  title: string;
  subtitle?: string;
  height?: string;
}

const {
  src,
  alt = 'Hero afbeelding',
  title,
  subtitle,
  height = '80vh',
} = Astro.props;
---

<section class="bl-section ih" style={`--ih-height: ${height}`}>
  {src
    ? <img data-allow-img class="ih__img" src={src} alt={alt} loading="lazy" decoding="async" />
    : <div class="ih__placeholder" aria-label={alt}></div>
  }
  <div class="ih__overlay">
    <div class="bl-inner ih__content">
      <h1 class="ih__title">{title}</h1>
      {subtitle && <p class="ih__subtitle">{subtitle}</p>}
    </div>
  </div>
</section>

<style>
  .ih {
    position: relative;
    width: 100%;
    height: var(--ih-height, 80vh);
    overflow: hidden;
    padding-block: 0;
  }
  .ih__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .ih__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
  }
  .ih__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(10, 10, 10, 0.7) 0%,
      rgba(10, 10, 10, 0.2) 60%,
      transparent 100%
    );
    display: flex;
    align-items: flex-end;
  }
  .ih__content {
    padding-bottom: 3rem;
  }
  .ih__title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 1rem;
    line-height: 1.1;
    max-width: 720px;
  }
  .ih__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #e8e8e8;
    margin: 0;
    line-height: 1.6;
    max-width: 560px;
  }
</style>