:host {
  display: grid;
  grid-gap: 1rem;
  width: 100%;
}

:host(:not(.loaded)) {
  position: absolute;
  visibility: hidden;
}

.results {
  display: grid;
  grid-gap: 1rem;
}

.results[data-mode="grid"] {
  grid-template-columns: repeat(var(--columns), var(--column-width))  
}

.results[data-mode="auto"] {
  grid-template-columns: repeat(auto-fill, var(--column-width))  
}

.visually-hidden {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 0;
  width: 0;
}

::part(shadow-parts-detect) {
  height: 10px!important;
  width: 10px!important;
}