.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 {
    --scrollbar-width-value: none;
    --padding-bottom: 0vw
}

@media(min-width: 720px) {
    .tabs__container {
        --scrollbar-width-value:none;
        --padding-bottom: 0vw
    }
}

@media(min-width: 1281px) {
    .tabs__container {
        --scrollbar-width-value:auto;
        --padding-bottom: 0.78125vw
    }
}

@media(min-width: 2400px) {
    .tabs__container {
        --scrollbar-width-value:auto;
        --padding-bottom: 18.75px
    }
}

.tabs__container {
    display: flex;
    overflow-x: auto;
    scrollbar-width: var(--scrollbar-width-value);
    padding-bottom: var(--padding-bottom)
}

.tabs__container::-webkit-scrollbar {
    display: none
}

@media(min-width: 1024px) {
    .tabs__container::-webkit-scrollbar {
        display:block;
        height: 8px
    }
}

.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%
}