.title{
    width: calc(21% - var(--longmarge));
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.artist{
    width: calc(15% - var(--longmarge));
}

.client{
    width: calc(15% - var(--longmarge));
}
.type{
    width: calc(15% - var(--longmarge));
}
.year{
    width: calc(9% - var(--longmarge));
}

.project:hover .year{
    width: calc(12% - var(--longmarge));
}

.project:hover .type{
    width: calc(20% - var(--longmarge));
}
.project:hover .client{
    width: calc(20% - var(--longmarge));
}

.project:hover .artist{
    width: calc(20% - var(--longmarge));
}

.project:hover .title{
    width: calc(28% - var(--longmarge));
}




@media (max-width:1500px){


    .title{
        width: calc(21% - var(--longmarge));
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .artist{
        width: calc(18% - var(--longmarge));
    }

    .client{
        width: calc(18% - var(--longmarge));
    }
    .type{
        width: calc(18% - var(--longmarge));
    }
    .year{
        display: none !important;
    }


    .project:hover .type{
        width: calc(24% - var(--longmarge));
    }
    .project:hover .client{
        width: calc(24% - var(--longmarge));
    }

    .project:hover .artist{
        width: calc(24% - var(--longmarge));
    }

    .project:hover .title{
        width: calc(28% - var(--longmarge));
    }

}


@media (max-width:1300px){


    .title{
        width: calc(27% - var(--longmarge));
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .artist{
        width: calc(24% - var(--longmarge));
    }

    .client{
        width: calc(24% - var(--longmarge));
    }
    
    .type{
       display: none !important;
    }


    .project:hover .client{
        width: calc(32% - var(--longmarge));
    }

    .project:hover .artist{
        width: calc(32% - var(--longmarge));
    }

    .project:hover .title{
        width: calc(36% - var(--longmarge));
    }

}


@media (max-width:1100px){


    .title{
        width: calc(45% - var(--longmarge));
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .artist{
        width: calc(30% - var(--longmarge));
    }

    .client{
       display: none  !important;
    }




    .project:hover .artist{
        width: calc(40% - var(--longmarge));
    }

    .project:hover .title{
        width: calc(60% - var(--longmarge));
    }

}

@media (orientation:portrait){
.project:hover{
    background: var(--color);
    width: 100% !important;
}

  .project:hover .title{
        width: calc(100% - var(--longmarge)) !important;
    }
}