// Place all the styles related to the search controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

.search-form {
  margin-bottom: 2em;

}

.search-type-nav {
  margin-bottom: 2em;
}

.search-results {
  @media (min-width: 40em) {
    position: relative;
  }

  em {
    font-style: normal;
    background-color: rgba(255,255,140,0.5);
  }
}

.list-filters {
  margin: 0 0 20px;

  @media (min-width: 18em) {
    display: flex;
  }

  @media (min-width: 40em) {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
  }

  a {
    font-size: $font-size-small;

    @media (min-width: 18em) {
      flex-grow: 1;
    }
  }
}

// Place all the styles related to the search controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

.search-form {
  margin-bottom: 2em;

}

.search-type-nav {
  margin-bottom: 2em;
}

.search-results {
  @media (min-width: 40em) {
    position: relative;
  }

  em {
    font-style: normal;
    background-color: rgba(255,255,140,0.5);
  }
}

.list-filters {
  margin: 0 0 20px;

  @media (min-width: 18em) {
    display: flex;
  }

  @media (min-width: 40em) {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
  }

  a {
    font-size: $font-size-small;

    @media (min-width: 18em) {
      flex-grow: 1;
    }

    @media (min-width: 40em) {
      padding: 5px 15px;
    }
  }
}

Make the filter buttons smaller on wide screens
Make the filter buttons smaller on wide screens
