//tabs
.profile {
    &-tabs-wrap {
        padding-bottom: 5rem;
        text-align: center;
    
        .tabs-main {
            max-width: 100%;
    
            .tab-item {
                display: none;
                padding: 2rem;
                border: 1px solid $color-mint;
                border-bottom: 0;
                text-align: left;
            }
    
            .tab-label {
                display: inline-block;
                margin: 0 0 -1px;
                padding: 1.5rem 5rem;
                font-weight: $semi-bold;
                text-align: center;
                color: $color-grey-3;
                border: 1px solid transparent;
                font-size: 1.6rem;
                width: 30%;
    
                &:hover {
                    color: $color-mint;
                    cursor: pointer;
                }
            }
    
            input:checked + .tab-label {
                color: $color-blue;
                border: 1px solid $color-mint;
                border-top: 3px solid $color-mint;
                border-bottom: 1px solid $color-white;
            }
    
            #tab1:checked ~ #content1,
            #tab2:checked ~ #content2 {
                display: block;
            }
        }
    }

    @media screen and (max-width: $small) {
        &-tabs-wrap {
            .tabs-main {
                .tab-label {
                    padding: 1.5rem;
                    width: 50%;
                }
            }
        }        
    }
}