@use 'sprucecss/scss/spruce' as *;

.call-to-action {
  border-block-start: 1px solid color('border');
  display: flex;
  flex-direction: column;
  gap: spacer('s') spacer-clamp('m', 'l');
  padding-block: spacer-clamp('l', 'xl');

  @include breakpoint('md') {
    flex-direction: row;
  }

  &__title {
    font-size: font-size('h1');
    font-weight: 400;
    margin-block: 0;
  }

  &__caption {
    @include layout-stack('m');
  }

  &__description {
    font-size: config('font-size-lead', $typography);
  }

  &__btns {
    display: flex;
    flex-wrap: wrap;
    gap: spacer('m');
  }
}

<div class="call-to-action">
    <h2 class="call-to-action__title">
        Transform Your Online Presence
    </h2>
    <div class="call-to-action__caption">
        <p class="call-to-action__description">
            Let us build a stunning, high-performing website tailored to your needs.
        </p>
        <div class="call-to-action__btns">
            <a href="#" class="btn btn--primary btn--lg btn--primary-shadow">Get a Quote</a>
            <a href="#" class="btn btn--outline-primary btn--lg">Consult Now</a>
        </div>
    </div>
</div>