.tabs{

    width: 100%;

    .tablist{

        display: flex;
        justify-content: space-around;

        .tablink{
            background: transparent;
            border: none;
            padding: 1rem 1.3rem 0 1.3rem;
            font-weight: var( --font-weight-medium);
            color: var(--color-grey-light);
            transition: background 0.3s ease-out;

            &.tabactive{
                border-bottom: 3px solid var(--primary);
                color: var(--primary);
            }
        }
    }

    .tabcontent{
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
        padding: 1.2rem 0;
        /*height: 100vh;*/

        &.tabcontent--active{
            opacity: 1;
            transform: translateX(0);
        }
    }
}