I have portfolio gallery where first item is grid 2 rows and 2 columns and right to that is 2 small images.

Portfolio has filter and if I click filter tab it filters out images but first image is small now. I have question How I can add first active item a style.

HTML:

.elementor-portfolio //class where is articles of each portfolio image
article.elementor-active //portfolio item what is active

CSS:

grid-column: 2!important;
grid-row: 2!important;

What I've tried:

jQuery(function($) {
   $(".elementor-portfolio article.elementor-active").first().css({
   'grid-column' : '2!important',
   'grid-row' : '2!important'
});
});

CODE:

<style>
    .active-one {
    grid-column: span 2;
    grid-row: span 2;
}
.active-twothree {
    grid-column: span 1;
    grid-row: span 1;
}

</style>
<script>

jQuery(function($) {
    $(".custom-grid .elementor-portfolio__filters li").click(function(){
    $(".custom-grid .elementor-portfolio .elementor-active").first().addClass("active-one");
    });
    $('.custom-grid .elementor-portfolio .elementor-active:gt(0)').removeClass('active-one');
});
    
</script>