.facets-view__wrapper {
  display: grid;

  grid-template-areas:
    'header'
    'sidebar'
    'filters'
    'results'
    'pager';

  @media (min-width: calc(768/16 * 1rem)) {
    gap: 0 calc(20 / 16 * 1rem);
    grid-template-columns: calc(368 / 16 * 1rem) 1fr;
    grid-template-areas:
      'sidebar  header'
      'sidebar  filters'
      'sidebar  results'
      'sidebar  pager';
  }

  @media (min-width: calc(992/16 * 1rem)) {
    gap: 0 calc(100 / 16 * 1rem);
  }
}

.facets-view form {
  display: contents;
}

.views-facets-form__facets {
  grid-area: sidebar;
}

.views-facets-form__filters {
  grid-area: filters;
  margin-block-end: 1rem;
}

.facets-view__header {
  grid-area: header;
  margin-block-end: 1rem;
}

.facets-view__results {
  container-name: view-results;
  container-type: inline-size;
  grid-area: results;
  margin-bottom: 100px;
}

.facets-view__items {
  display: grid;
  gap: calc(16 / 16 * 1rem);
  grid-template-columns: 1fr;

  @container view-results (width >= calc(575/16 * 1rem)) {
    display: grid;
    gap: calc(16 / 16 * 1rem);
    grid-template-columns: repeat(2, minmax(5rem, 1fr));
  }
}

.facets-view__results .results__loading {
  display: none;
}

.facets-view.facets-view--updating {
  .results__loading {
    display: block;
    animation: spin 1s linear infinite;
  }

  .facets-view__items {
    display: none;
  }
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}