.filter-bar {
  margin-bottom: 2rem;

  form {
    display: grid;
    grid-template-columns: 100%;
    gap: .625rem;

    .filter-bar__field {
      display: flex;
      flex-direction: column;
    }
  }

  .filter-bar__active {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .625rem;
    margin-top: .625rem;

    .filter-tag {
      font-size: .75rem;
      padding: .25rem .5rem;
      background: var(--header-bg);
      border-radius: .25rem;
      .filter-tag__label,
      .filter-tag__value {
        color: var(--text);
      }
    }

    .filter-bar__clear {
      font-size: .875rem;
      font-weight: 500;
      color: var(--brand);
    }
  }

  @media screen and (min-width: 768px) {
    form {
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
  }
}