.searchContainer {
  max-width: var(--size-width-lead);
  margin: 0 auto var(--spacing-section-bottom);

  a {
    text-decoration: none;
  }

  mark {
    background: var(--color-goldenBeige);
    color: inherit;
    padding: 0 .05em;
    border-radius: 2px;
  }
}

.searchField {
  margin-top: var(--spacing-l);
  width: 100%;
  max-width: 24rem;
  font-size: var(--font-size-lead);
  font-weight: 500;
  color: var(--color-deepBrick);
  position: relative;

  input {
    width: 100%;
    padding: .8rem 3rem .8rem 1.5rem;
  }
}

.searchIcon {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
}

.resultItem {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-m);
  border-top: var(--border);
  margin-top: var(--spacing-m);
  padding-top: var(--spacing-s);
}

.resultBody {
  flex: 1;
  min-width: 0;
}

.date {
  margin-top: 0.25em;
  font-family: var(--font-serif);
  font-size: var(--font-size-caption);
  color: var(--color-chateauBlue-05);
}

.snippet {
  margin-top: 0.25em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fetching {
  opacity: 0.5;
  transition: opacity .15s ease;
}

.thumb {
  flex: 0 0 5rem;
  width: 5rem;
  height: 5rem;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.suphead {
  display: block;
  font-size: var(--font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1em;
}

.resultsCounter {
  margin: var(--spacing-s) 0;
}

.noResults {
  margin: var(--spacing-s) 0 var(--spacing-section-bottom);
}
