.tabber{
    margin: 2rem 0;
}

.tabs {
    display: flex;
    width: inherit;
    border-bottom: 2px solid var(--color-border-light);
    margin: 0 0.5rem;
    margin-bottom: 2rem;
    font-family: var(--font-headline);
}

.tabs>button {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-main);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.tabs>button:hover {
    color: var(--color-brand-primary);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.tabs>button.button-tab-active {
    color: var(--color-brand-primary);
    border-bottom-color: var(--color-brand-primary);
    background-color: transparent;
    opacity: 1;
}

.tab-content > div {
    animation: fadeInTab 0.3s ease-in-out;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}