@if (icon() || title() || subtitle()) {
  <div class="tw-mb-4 sm:tw-mb-6" [class]="alignmentClasses()">
    @if (icon()) {
      <!-- In some scenarios this icon's size is not limited by container width correctly -->
      <!-- Targeting the SVG here to try and ensure it never grows too large in even the media queries are not working as expected -->
      <div
        class="tw-size-20 sm:tw-size-24 [&_svg]:tw-w-full [&_svg]:tw-max-w-24 tw-mx-auto tw-content-center"
      >
        <bit-svg [content]="icon()"></bit-svg>
      </div>
    }

    @if (title()) {
      <!-- Small screens -->
      <h1 bitTypography="h2" class="tw-mt-2 sm:tw-hidden">
        {{ title() }}
      </h1>
      <!-- Medium to Larger screens -->
      <h1 bitTypography="h1" class="tw-mt-2 tw-hidden sm:tw-block">
        {{ title() }}
      </h1>
    }

    @if (subtitle()) {
      <div class="tw-text-sm tw-mt-4 sm:tw-mt-0 sm:tw-text-base">
        {{ subtitle() }}
      </div>
    }
  </div>
}