.tabs > div > div {
    display: none;
    border: 1px solid #ccc;
    padding: 8px 32px;
}

.tabs > div.selected > div {
    display: block;
}

.tabs > div.tabs-switcher {
    display: flex;
    align-items: flex-end;
}

.tabs > div.tabs-switcher > div {
    border: 1px solid #ccc;
    background-color: #eee;
    margin-top: 2px;
    width: 300px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    height: 36px;
    padding: 2px;
    font-size: var(--body-font-size-s);
    line-height: 32px;
    cursor: pointer;
}

.tabs ul li {
    margin: 8px 0;
}

.tabs > div.tabs-switcher > div.selected {
    background-color: var(--background-color);
    border-top-width: 3px;
    border-top-color: var(--link-color);
    height: 38px;
}

@media (min-width: 600px) {
    .tabs ul {
        font-size: 16px;
        list-style: none;
        padding: 0;
        columns: 200px 3;
    }    
}