<section class="results container">
  <form class="results__form" action="#" role="search">
    <label class="srOnly" for="results-search">Search</label>
    <div class="results__controls">
      <div class="search">
        <svg class="search__icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" aria-hidden="true" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg>
        <input id="results-search" class="search__input input" name="q" type="search" value="bibendum" required />
      </div>
      <button class="button" type="submit">Search</button>
    </div>
  </form>

  <div class="results__meta">Showing <strong>1 – 10</strong> of <strong>76</strong> results for <strong>bibendum</strong></div>

  <ol class="results__list">
    <li class="results__item result">
      <h2 class="result__title"><a href="#">Sphinx of Black Quartz, Judge My Vow</a></h2>
      <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>
    <li class="results__item result">
      <h2 class="result__title"><a href="#">Sphinx of Black Quartz, Judge My Vow</a></h2>
      <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>
  </ol>

  <nav class="results__pagination pagination" aria-label="Search results pages">
    <ul class="pagination__list">
      <li class="pagination__item"><button class="pagination__button button" disabled>Previous</button></li>
      <li class="pagination__item"><span class="pagination__current" aria-label="Page 1" aria-current="page">1</span></li>
      <li class="pagination__item"><a class="pagination__link" href="#" aria-label="Page 2">2</a></li>
      <li class="pagination__item"><a class="pagination__button button" href="#">Next</a></li>
    </ul>
  </nav>
</section>

@use '@/core' as *;

.results {
  --content-width: 40.5rem;

  margin-inline: auto;
  max-width: var(--content-width);

  &__form {
    display: grid;
    gap: 0.5rem;
  }

  &__controls {
    display: grid;
    gap: 0.75rem;

    @include at(sm) {
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }

  &__meta,
  &__message {
    margin: fluid-rems(2, 3) 0 0;
  }

  &__list {
    display: grid;
    list-style: none;
    margin: fluid-rems(1, 1.5) 0 0;
    padding: 0;
  }

  &__pagination {
    justify-content: flex-start;
    margin-top: fluid-rems(1.5, 2.5);
  }
}