.about {
    .nav {
        display: flex;
        flex: 1;
        justify-content: center;
        z-index: var(--top-z-index);
        position: relative;
        height: auto;
        margin: -2rem auto 2rem;
        max-width: 100%;

        .menu-item {
            width: auto;
            cursor: pointer;
            display: flex;
            padding: 1.2rem 3rem;
            border-style: solid;
            border-color: var(--darker-grey);
            border-width: 1px 0 1px 1px;
            background: var(--white);
            transition: all 0.5s 0.3s;

            &:first-child {
                border-radius: 5px 0 0 5px;
            }

            &:last-child {
                border-radius: 0 5px 5px 0;
                border-width: 1px;
            }

            .text {
                transition: all 0.5s 0.3s;
                color: var(--near-black);
                font-size: var(--font-size-xs);
                align-self: center;
                z-index: var(--top-z-index);
                text-align: center;
                width: 100%;
                position: relative;
                text-transform: uppercase;
                font-family: var(--base-font-family);
            }

            &:hover {
                transition: all 0.2s;

                .text {
                    transition: all 0.2s;
                }
            }

            &:hover,
            &.active {
                background: var(--blue);

                .text {
                    color: white;
                }
            }
        }

        @media (--sm-down) {
            top: 92vh;
            height: 8vh;
            margin-bottom: 0;
            position: sticky;

            .menu-item {
                text-align: center;
                padding: 1rem;
                width: 50%;
            }
        }
    }
}
