<section class="txds-hero txds-hero--filled">
  <div class="txds-hero__inner">
    <div class="txds-hero__content">
      <h1 class="txds-hero__heading">Texas Department of Agency Online Services</h1>
      <p class="txds-hero__text">Find IT products and services through TDOA's shared technology offerings, or purchase directly from vendors using cooperative contracts.</p>
      <a href="#" class="txds-hero__cta">About Agency</a>
    </div>
    <div class="txds-hero__image">
      <img src="hero-family.png" alt="Father holding child">
    </div>
  </div>
</section>

<section class="txds-hero txds-hero--open">
  <div class="txds-hero__inner">
    <div class="txds-hero__content">
      <h1 class="txds-hero__heading">Texas Department of Agency Online Services</h1>
      <p class="txds-hero__text">Find IT products and services through TDOA's shared technology offerings, or purchase directly from vendors using cooperative contracts.</p>
      <a href="#" class="txds-hero__cta">About Agency</a>
    </div>
    <div class="txds-hero__image">
      <img src="hero-family.png" alt="Father holding child">
    </div>
  </div>
</section>

<section class="txds-hero txds-hero--filled">
  <div class="txds-hero__inner">
    <div class="txds-hero__content">
      <h1 class="txds-hero__heading">Texas Department of Agency Online Services</h1>
      <p class="txds-hero__text">Find IT products and services through TDOA's shared technology offerings, or purchase directly from vendors using cooperative contracts.</p>
      <a href="#" class="txds-hero__cta">About Agency</a>
    </div>
    <div class="txds-hero__image">
      <img src="/assets/images/photos/hero-family.png" alt="Father holding child">
    </div>
  </div>
</section>
<style>
  /* Desktop default */
  .txds-hero__inner {
    display: flex;
    gap: 32px;
    align-items: center;
  }
  /* Mobile layout */
  @media (max-width: 767px) {
    .txds-hero__inner {
      flex-direction: column;
      gap: 0;
      padding: 0;
    }
    .txds-hero__content {
      width: 100%;
      padding: 32px 24px;
    }
    .txds-hero__image {
      width: 100%;
      height: 266px;
      border-radius: 0;
    }
    .txds-hero__cta {
      width: 100%;
    }
  }
</style>