.f-tab-header {
    font-size: 18px;
    position: relative;
    opacity: .5;
    cursor: pointer;
    transition: var(--f-duration-default, 0.25s) all;
    text-wrap: nowrap;
    padding: 12px 0
}

.f-tab-header:after {
    content: "";
    width: 0;
    height: 2px;
    background-color: currentColor;
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    transition: var(--f-duration-default, 0.25s) width ease-in-out
}

.f-tab-header.active, .f-tab-header:hover {
    opacity: 1;
    color: rgb(var(--color-foreground))
}

.f-tab-header.active:after {
    width: 100%
}

@media screen and (max-width: 767px) {
    .f-tab-header {
        padding: 8px 0
    }
}

.f-tab-content {
    display: none
}

.f-tab-content.active {
    display: block
}

.f-tabs__header {
    border-bottom: 1px solid rgb(var(--color-border))
}

.f-tabs__header-inner {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
    padding-bottom: 2px;
    column-gap: 30px
}

.f-tabs__header-inner::-webkit-scrollbar {
    display: none
}

@media screen and (min-width: 768px) {
    .f-tabs__header-inner {
        column-gap: 60px
    }
}

.f-tabs__content {
    padding-top: 24px
}

@media screen and (min-width: 768px) {
    .f-tabs__content {
        padding-top: 40px
    }
}