.horizontal-slider {
  display: flex;
  flex-flow: row;
  gap: 2em;
  width: calc(100% + 6em);
  overflow: hidden;
  padding-right: 6em;
  margin: 0 auto;
  user-select: none;
  touch-action: none;
  mask-image: linear-gradient(to left, transparent 0, white 7em);
  mask-type: luminance;
  mask-mode: alpha;
}
.horizontal-slider .item {
  flex: 0 0 calc(33.33% - 2/3*2em);
  background: var(--bg-primary);
  /*border: var(--border) 1px solid;*/
  border-radius: var(--border-radius-double);
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2em;
    border-radius: 0 0 var(--border-radius-double) var(--border-radius-double);
    /*background: linear-gradient(to bottom, transparent, var(--bg-primary));*/
    background: linear-gradient(to bottom, transparent, var(--bg-primary) 90%);
  }

  @media all and (max-width: 767px)  {
    flex: 0 0 100%; 
    /*min-height: 20em;*/
  }

}
.horizontal-slider .item .wrapper {
  max-height: 100%;
  overflow-y: auto;
  /*scrollbar-width: thin;*/
  /*scrollbar-color: var(--bg-gray) transparent;*/
  transition: all .2s ease;
  touch-action: pan-y;

  &::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 6px rgba(83, 83, 83, 0.07);*/
    background-color: transparent;
  }
  &::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--fg-gray-lightest);
    transition: background-color .2s ease;
  }
}
.horizontal-slider .item:hover .wrapper {

  &::-webkit-scrollbar-thumb {
    background-color: var(--fg-gray-light);
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--fg-gray);
  }
}

.horizontal-slider .item .content {
  padding: 0 1.33em;
}

.horizontal-slider .item .header {
  /*background: var(--bg-gray-darkest);*/
  min-height: 5em;
  padding: 0em 2em 0em 4em;
  background-size: 2em;
  background-position: 1.2em center;
  align-content: center;
  background-repeat: no-repeat;
  position: relative;

  &::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 1em;
    width: calc(100% - 2em);
    height: 1px;
    background: var(--bg-gray);
  }
}

.horizontal-slider .item .header * {
  margin: 1rem 0;
}


.slider-buttons {
  float: right;
  display: flex;
  gap: 1em;
  margin-top: 0;
  &:after {
    display: none;
  }
}