.tabs {
    border-radius: var(--border-radius);
    border-top: none;
    gap: 20px;
    display: flex;
}

.tabs .tab {
    display: inline-block;
    padding: 0.8em 1.2em;
    font-size: 0.7em;
    font-weight: 600;
    cursor: pointer;
    border-left: 4px transparent;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    transition: 0.2s;
}

.tabs .tab:not(.activeTab):hover {
    background-color: rgba(200, 200, 200, 0.2);
}

.activeTab {
    background-color: rgba(200, 200, 200, 0.4);
    text-decoration: underline;
}

.tabs .upper {
    font-weight: 600;
    font-size: 1.4em;
    display: flex;
    gap: 6px;
    flex-direction: column;
    border-right: 3px solid var(--main-general-colour);
}

.tabs .lower {
    padding: var(--padding-deep);
    user-select: none;
    flex: 1;
    border-top: none;
}

@media screen and (max-width: 15cm) {
    .tabs {
        flex-direction: column;
    }
    .tabs .upper {
        border: none;
    }
    .tabs .tab {
        padding: 0.2em 0.4em;
        border-radius: 6px;
    }
}