.hero-categories {
  background-image: url("/assets/imgs/bg-categories.webp");
  background-position: center;
  background-repeat: no-repeat;
}
.categories-section {
   margin-top: 45px ;
   margin-bottom: 70px;
  .categories-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
  }
  .category-card {
    max-width: none;
    &:hover {
      transform: scale(1.05);
    }
  }
}
@media screen and (max-width: 992px) {
  .categories-section {
    margin-block: 40px;
  }
}