.menu-highlight{
  padding: 20px 0 10px 0;
}

.menu-highlight .menu-tiles{
  display:  flex;
  gap: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.menu-highlight .menu-tile{
  border-radius: 5px;
  overflow:  hidden;
  background-color: #F0F0F0;
  cursor: pointer;
  position: relative;
  transition: background-color 0.4s ease;
  flex: 0 0 calc((100% - 40px) / 3);
}

.menu-highlight .menu-tile .tile-link{
  height: 100%;
}

.menu-highlight.with-alert .menu-tile{
  flex: 0 0 calc((100% - 60px) / 4);
}

.menu-highlight .menu-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #F7901E;
  transition: left 0.4s ease;
}

.menu-highlight .menu-tile.sales::before {
  background-color: #C72B2E;
}

.menu-highlight .menu-tile.new-products::before {
  background-color: #00BE61;
}

.menu-highlight .menu-tile.services::before {
  background-color: #198641;
}

.menu-highlight .menu-tile:hover::before {
  left: 0;
}

.menu-highlight .menu-tile .tile-icon{
  width: 70px;
  height: 100%;
  background: #F7901E;
  position: relative;
}

.menu-highlight .menu-tile.sales .tile-icon{
  background: #C72B2E;
}

.menu-highlight .menu-tile.new-products .tile-icon{
  background: #00BE61;
}

.menu-highlight .menu-tile.services .tile-icon{
  background: #198641;
}

.menu-highlight .menu-tile .tile-content{
  padding: 10px;
}

.menu-highlight .menu-tile .tile-title{
  font-family: dinpro-bold, sans-serif;
  font-size: 20px;
  line-height: 26px;
  text-transform:  uppercase;
  color: #575656;
  transition:  color 0.4s ease;
}

.menu-highlight .menu-tile:hover .tile-title{
  color: #FFF;
}

.menu-highlight .menu-tile .tile-message{
  font-family: dinpro-light, sans-serif;
  font-size: 16px;
  line-height: 21px;
  color: #575656;
  transition:  color 0.4s ease;
}

.menu-highlight .menu-tile:hover .tile-message{
  color: #FFF;
}

@media (max-width: 991px) {
  .menu-highlight .menu-tile,
  .menu-highlight.with-alert .menu-tile{
    flex: 0 0 calc((100% - 20px) / 2);
  }
}

@media (max-width: 767px) {

  .menu-highlight .menu-tiles{
    gap: 15px;
  }

  .menu-highlight .menu-tile .tile-icon{
    width: 48px;
  }

  .menu-highlight .menu-tile .tile-title{
    font-size: 14px;
    line-height: 18px;
  }

  .menu-highlight .menu-tile .tile-message{
    display: none;
  }

}