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

.info-card {
  $this: &;

  @include a11y-card-link('.info-card__link', true);
  @include transition;
  border: 1px solid color('border');
  border-radius: config('border-radius-lg', $display);
  color: color('text');
  display: flex;
  flex-direction: column;
  gap: spacer('m');
  padding: spacer-clamp('m', 'l');

  &:hover {
    @include set-css-variable((
      --base-color-heading: hsl(0deg 0% 100%),
      --base-color-link: hsl(0deg 0% 100%),
      --base-color-link-hover: hsl(0deg 0% 100%),
      --base-color-text: hsl(0deg 0% 100%),
    ));
    background-color: color('primary');
    transform: translateY(-0.5rem);
  }

  > * {
    margin-block: 0;
  }

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

  &__title {
    @include transition;
    font-weight: 400;

    a {
      color: color('heading');
      text-decoration: none;
    }
  }

  &__link {
    margin-block-start: auto;
  }
}

<div class="info-card">
    <div class="info-card__caption">
        <h2 class="info-card__title">Custom Web Development</h2>
        <p>Get a website tailored to your brand and business needs. We create responsive, user-friendly, and SEO-optimized sites.</p>
    </div>
    <a class="info-card__link" href="#">Learn more</a>
</div>
<div class="info-card">
    <div class="info-card__caption">
        <h2 class="info-card__title">E-commerce Solutions</h2>
        <p>Build a secure and scalable online store. Our e-commerce solutions enhance your shopping experience and drive sales.</p>
    </div>
    <a class="info-card__link" href="#">Learn more</a>
</div>
<div class="info-card">
    <div class="info-card__caption">
        <h2 class="info-card__title">Website Maintenance & Support</h2>
        <p>Ensure your website stays updated and secure with our maintenance services. We handle updates, security, and technical support.</p>
    </div>
    <a class="info-card__link" href="#">Learn more</a>
</div>