.tabs {
  --gap: 6.4vw;
}
@media (min-width: 720px) {
  .tabs {
    --gap: 2.5vw;
  }
}
@media (min-width: 1281px) {
  .tabs {
    --gap: 1.6666666667vw;
  }
}
@media (min-width: 2400px) {
  .tabs {
    --gap: 40px;
  }
}
.tabs {
  position: relative;
  width: 100%;
}
.tabs::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background-image: linear-gradient(to right, transparent, var(--color-paper-white));
  width: 20px;
  z-index: 2;
}
.tabs__container {
  display: flex;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tabs__container::-webkit-scrollbar {
  display: none;
}
.tabs__item {
  padding: 0 calc(var(--gap) / 3.5) 0;
}
.tabs__item_selected .tabs__button::before {
  background-color: var(--color-brand);
}
.tabs__button {
  --padding-bottom: 2.4vw;
}
@media (min-width: 720px) {
  .tabs__button {
    --padding-bottom: 0.703125vw;
  }
}
@media (min-width: 1281px) {
  .tabs__button {
    --padding-bottom: 0.46875vw;
  }
}
@media (min-width: 2400px) {
  .tabs__button {
    --padding-bottom: 11.25px;
  }
}
.tabs__button {
  position: relative;
  padding-bottom: var(--padding-bottom);
}
.tabs__button::before {
  --height: 0.5333333333vw;
}
@media (min-width: 720px) {
  .tabs__button::before {
    --height: 0.15625vw;
  }
}
@media (min-width: 1281px) {
  .tabs__button::before {
    --height: 0.1041666667vw;
  }
}
@media (min-width: 2400px) {
  .tabs__button::before {
    --height: 2.5px;
  }
}
.tabs__button::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--height);
  width: 100%;
}