FRONTEND_MVC/assets/less/components/search.less

.search-header{
  background: #eaeaea;
  padding: 10px;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .search_form{
    display: flex;
    flex-grow: 1;
    align-items: center;
    h6{
      margin: 0;
      margin-right: 15px;
    }
    input{
      display: block;
      border: none;
      flex-grow: 1;
      border-top-left-radius: 50px;
      border-bottom-left-radius: 50px;
      outline: none;
      padding: 4px 3px 4px 26px;
      width: 20%;
      background-image: url(/img/search.svg);
      background-repeat: no-repeat;
      background-size: 14px;
      background-position: 9px 8px;
    }
    button{
      display: block;
      border: none;
      background: #f5f5f5;
      color: #f6911f;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
      padding: 3px 10px;
      outline: none;
    }
  }
}
.archive{
  .search_form{
    display: flex;
    flex-wrap: wrap;
    h6{
      @media(max-width: 375px){
        flex: 100%;
        margin: 0 0 15px 0;
      }
    }
  }
}