ImageBackground image

---
interface Props {
  src?: string;
  alt?: string;
  heading?: string;
  sub?: string;
  opacity?: number;
  minHeight?: string;
}

const {
  src = '/img/ext/photo-1497366216548-37526070297c-w1400-3c21b2.jpg',
  alt = 'Achtergrondafbeelding',
  heading = 'Jouw boodschap hier',
  sub = 'Voeg inhoud toe via de props.',
  opacity = 0.5,
  minHeight = '480px',
} = Astro.props;
---

<section class="bl-section ibg" style={`--ibg-opacity: ${opacity}; --ibg-min-height: ${minHeight}`}>
  <img data-allow-img class="ibg__img" src={src} alt={alt} loading="lazy" decoding="async" />
  <div class="ibg__overlay"></div>
  <div class="bl-inner ibg__content">
    <h2 class="ibg__title">{heading}</h2>
    {sub && <p class="ibg__sub">{sub}</p>}
  </div>
</section>

<style>
  .ibg {
    position: relative;
    min-height: var(--ibg-min-height, 480px);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-block: 0;
  }
  .ibg__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ibg__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, var(--ibg-opacity, 0.5));
  }
  .ibg__content {
    position: relative;
    z-index: 1;
    padding-block: var(--bl-section-py);
  }
  .ibg__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 1rem;
    line-height: 1.1;
    max-width: 640px;
  }
  .ibg__sub {
    font-size: 1.125rem;
    color: #e8e8e8;
    margin: 0;
    line-height: 1.6;
    max-width: 520px;
  }
</style>