@import '~/styles/utils/custom-media';

.header {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 290px);
  align-items: center;

  /*
   * the content header has some padding
   * we need to apply some right padding to this container then
   */
  padding-right: 15px;
  @media (--breakpoint-not-small) {
    padding-right: 40px;
  }
}

.RuleProviderItemWrapper {
  padding: 6px 15px;
  @media (--breakpoint-not-small) {
    padding: 10px 40px;
  }
}