:root {
    --color-1: #555;
    --color-2: #888;
    --color-3: #ddd;
    --color-4: #f7f7f7;
}

.tabs {
    margin: 30px auto;
    font-family: sans-serif;
    color: var(--color-front);
    font-size: 14px;
    line-height: 24px;

    & ul.btns {
        padding: 0;
        margin: 0;
        list-style-type: none;
        display: flex;
        justify-content: center;

        & a {
            transition: all 0.3s ease-in;
            display: block;
            padding: 2vw;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
            color: var(--color-front);
            background-color: var(--color-back);

            &:hover {
                color: var(--color-red);
            }

            &.active {
                color: var(--color-back);
                background-color: var(--color-front);
            }

            @media (width <= 450px) {
                & {
                    font-size: 12px;
                }
            }
        }
        /* закругления */
        & li {
            overflow: hidden;
            /* box-shadow: 0 1px 2px var(--color-front); */
            box-shadow: 0 -0.3px 1px var(--color-front);

            &:nth-child(1) {
                border-radius: var(--borderRadius) 0 0 0;
            }
            &:nth-child(3) {
                border-radius: 0 var(--borderRadius) 0 0;
            }
        }
        
    }

    & .tabContent {
        & div {
            padding: 30px;
            box-shadow: 0 0px 1px var(--color-front);
            border-radius: var(--borderRadius);
        }
    }
}