.home-categories-wrapper>div {
   gap: 31px;
}

.category-group {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
}

.category-group .category:nth-child(n+7) {
   display: none;
}

.category {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 100%
}

.category img {
   width: 100%;
   height: 113px;
   border-radius: 8px;
}

.category span {
   flex-grow: 1;
   text-align: center;
   font-weight: 700;
}


/* WebKit browsers: Chrome, Edge, Safari */
.category-group::-webkit-scrollbar {
   height: 4px;
   /* horizontal scrollbar height */
   width: 4px;
   /* vertical scrollbar width */
}

.category-group::-webkit-scrollbar-track {
   background: #e5e7eb;
   /* light gray track */
   border-radius: 999px;
}

.category-group::-webkit-scrollbar-thumb {
   background-color: var(--wp--preset--color--primary-main);
   /* blue */
   border-radius: 999px;
   /* rounded ends */
}

/* Remove scrollbar buttons (arrows) */
.category-group::-webkit-scrollbar-button {
   display: none;
}

/* Firefox */
.category-group {
   scrollbar-width: thin;
   scrollbar-color: var(--wp--preset--color--primary-main) #e5e7eb;
}

/* For Webkit browsers (Chrome, Edge, Safari) */
.category-group::-webkit-scrollbar {
   width: 12px;
   /* scrollbar width */
   height: 5px;
   /* scrollbar height */
}

.category-group::-webkit-scrollbar-button {
   display: none;
   /* remove the arrow buttons */
}

.category-group::-webkit-scrollbar-thumb {
   background: #888;
   /* scrollbar handle */
   border-radius: 6px;
}

.category-group::-webkit-scrollbar-track {
   background: #f1f1f1;
   /* scrollbar background */
}


@media (min-width: 1024px) {
   .home-categories-wrapper>div {
      gap: 111px;
   }

   .category-group {
      display: flex;
      gap: 31px;
      max-width: 1080px;
      overflow-x: scroll;
      scrollbar-width: thin;
      scrollbar-color: var(--wp--preset--color--primary-main) #e5e7eb;
      padding-bottom: 44px;
      /* space for scrollbar */
      box-sizing: content-box;
      /* content doesn't shrink */
   }

   .category-group .category:nth-child(n+7) {
      display: flex;
   }

   .category {
      width: 187px;
      flex-shrink: 0;
   }


}

@media (min-width: 768px) {}