.shop-by-module .card {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
}

.shop-by-module .row {
  margin-bottom: var(--bs-gutter-y);
}

.shop-by-module .row .col .card .card-footer {
  text-align: center;
}

.shop-by-module .version-1 .position-absolute {
  height: 4em !important;
  width: 4em !important;
  left: -2em;
  top: calc(50% - 2em);
}

.shop-by-module .version-1 .col .card {
  padding-left: 2em;
  margin-left: 2em;
}

.shop-by-module .version-1 .col .card .card-footer {
  text-align: left;
}

.shop-by-module .version-1 .col .card .position-absolute {
  height: 4em;
  width: 4em;
  left: -2em;
  top: calc(50% - 2em);
}

.shop-by-module .version-1 .col .card .card-footer,
.shop-by-module .version-2 .col .card .card-footer {
  border-top: 0;
}

.shop-by-module .version-2 .col {
  padding-top: 4em;
}

.shop-by-module .version-2 .col .card {
  padding-top: 4em;
}
  
.shop-by-module .version-2 .col .card .position-absolute {
  height: 8em !important;
  width: 8em !important;
  left: calc(50% - 4em);
  top: -4em;
}





.shop-by-module.scroll .row {
  padding-right: 44px;
  padding-bottom: 2em;
}

.shop-by-module .grabbable {
  overflow-x: auto;
}

.shop-by-module .grabbable::-webkit-scrollbar {
  width: 20px;
}

.shop-by-module .grabbable::-webkit-scrollbar-track {
  background: #edf0f7;
  border-radius: 16px;
}

.shop-by-module .grabbable::-webkit-scrollbar-thumb {
  background: #717d96;
  border-radius: 16px;
  
}

@supports not selector(::-webkit-scrollbar) {
  .shop-by-module .grabbable {
    scrollbar-color: #717d96 #edf0f7;
  }
}

.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}