.tabs-names{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem;
}

.tab-name{
    padding: 0.5rem;
    cursor: pointer;
    border-radius: var(--border-radius);
    border: 2px transparent solid;
}

.tab-name.active{
    background-color: var(--wrapper-bg);
    color: var(--wrapper-text);
    border: 2px var(--brand) solid;
}

.tabs-content{
    padding: 1rem;
    border-radius: var(--border-radius);
    background-color: var(--wrapper-bg);
    color: var(--wrapper-text);
}

.tab{
    display: none;
}

.tab.active{
    display: block;
}