.works .sec-title {
  margin-bottom: 20px;
}

@media (max-width: 760px) {
  .categories {
    gap: 0px !important;
  }
}

.categories {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.item {
  width: 300px;
  height: 300px;
}

.mask {
  margin: 0 10px;
  width: 100%;
  height: 100%;
  -webkit-mask: url("/img/categories/heart2.png") no-repeat center center;
  mask: url("/img/categories/heart2.png") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.event .mask {
  background: url("/img/categories/event.jpg") no-repeat top center;
  background-size: cover;
}

.price .mask {
  background: url("/img/categories/price.jpg") no-repeat top center;
  background-size: cover;
}

.vessel .mask {
  background: url("/img/categories/vessel.jpg") no-repeat top center;
  background-size: cover;
}

.sign .mask {
  background: url("/img/categories/sign.jpg") no-repeat top center;
  background-size: cover;
}


.beverage .mask {
  background: url("/img/categories/beverage.jpg") no-repeat center;
  background-size: cover;
}


.favors .mask {
  background: url("/img/categories/weddingfavor.jpg") no-repeat top center;
  background-size: cover;
}


.sweetBar .mask {
  background: url("/img/categories/sweetBar.jpeg") no-repeat top center;
  background-size: cover;
}

.garnish .mask {
  background: url("/img/categories/garnish.jpg") no-repeat top center;
  background-size: cover;
}

.bartender .mask {
  background: url("/img/categories/bartender.jpg") no-repeat top center;
  background-size: cover;
}

.reserve .mask {
  background: url("/img/categories/reserve.jpg") no-repeat top center;
  background-size: cover;
}


.categories .txt {
  position: relative;
  bottom: 50px;
  background-color: #040b1bb3;
  color: white;
  padding: 10px;
  font-weight: 600;

  &:hover {
    background-color: #040b1b;
    color: #c99530;
    font-weight: 800;
  }
}