@use "../../../../styles/abstracts/variables";
@use "../../../../styles/abstracts/mixins";  

.portfolio {

    &__content {
        &__table{
            background: variables.$col-active-btn-bg;
            border: 1px solid variables.$col-border-lining;
            border-radius: 6px;
            grid-gap: 30px;
            display: grid;
            color: variables.$col-white;
            grid-template-columns: 160px 120px 100px 100px;
    
            @media only screen and (max-width: 1000px) {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                width: 100%;
                gap: 20px;
            }
    
            span {
                font-weight: 600;
                padding: .8rem 1rem;
                font-size: .8rem;
                @media only screen and (max-width: 1000px) {
                display: flex;
                flex-direction: column;
                flex: 0 0 140px;
                color: variables.$col-white;
                }
            }
            &__children {
                margin-top: 0rem;
                overflow-x: scroll;
                margin-bottom: 1rem;
        
                @media only screen and (max-width: 1000px) {
                    display: flex;
                    flex-direction: column;
                    
                }
            }
        }
    }
}