<ul>
  <li class="result">
    <h3 class="result__title"><a href="#">Sphinx of Black Quartz, Judge My Vow</a></h3>
    <p class="result__description">Proin viverra ipsum vel vulputate suscipit. Vivamus convallis eleifend urna, at euismod metus bibendum pharetra id.</p>
    <div class="result__url"><a href="#">https://www.imarc.com/services/strategy</a></div>
  </li>
</ul>

@use '@/core' as *;

.result {
  border-top: 1px solid var(--color-gray-200);
  padding-block: fluid-rems(1.5, 2);

  &__title {
    font-size: fluid-rems(1.125, 1.25);
    margin: 0;
  }

  &__description {
    color: var(--color-gray-600);
    font-size: fluid-rems(0.875, 1);
    line-height: 1.5;
    margin: 0.75rem 0 0;
  }

  &__url {
    color: var(--color-gray-600);
    font-size: fluid-rems(0.75, 0.875);
    margin: 0.5rem 0 0;
    overflow-wrap: anywhere;

    a {
      color: inherit;
    }
  }
}