/* 
* Basic CSS
*/
.filter-list {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  list-style: none !important;
  padding-left:0 !important;
  padding-bottom:30px !important;
}
.items__list {
  display:flex;
  flex-wrap:wrap;
  list-style: none !important;
} 
.items__item{
 max-width:100%;
}
.items__item {
  background-size:cover !important;
  transition:background-position .4s;
  background-position:center center;
}
.items__item {
  margin-bottom:20px;
  overflow: hidden;
}
.show_overlay::after {
  content:'';
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:rgba(0,0,0,.4);
  z-index: 1;
}
.items__title, .items__content {
  z-index: 10;
  position: relative;
  margin-bottom:10px ;
}
.hfg-deliner {
width:50px !important;
height:4px !important; 
margin-bottom:10px;
z-index: 10;
position: relative;
}
.hfg-deliner.center {
  margin-left:auto;
  margin-right:auto;
}
.hfg-flex {
  display:flex;
  gap:12px;
  position: relative;
  z-index: 10;
  align-items: center;
  margin-bottom:20px;
}
.layout2:hover, .layout1:hover {
   background-position:left center;
}
.filter__link, .filter__item--active .filter__link {
  background:transparent !important;
}
.layout5-flex {
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  align-items: center;
}
.layout4-image,.layout5-image {
  margin-bottom:15px;
  object-fit: cover;
}