/* 

* On Large Screens lets center orphaned display:grid items if you decide to use the class 
*
* "display:grid;" setup should be handled in tailwind classes
*
* In the block template double the requirement on large screens of 4 to 8 cols i.e. lg:u-wp-3-grid-cols-8
*
* In the block template double the col-span as well i.e. lg:u-wp-3-col-span-2

* In the block template add this class "tp-center-orphaned-grid-item-in-four-columns" to the grid item.
*
* Ensure that you handle display:grid; setup in tailwind on screen sizes lower than lg: or 1024px
*/

/*center orphaned items with the max is set to four columns*/

@media (min-width: 1024px) {

    .tp-center-orphaned-grid-item-in-four-columns:last-child:nth-child(4n - 1) {
        grid-column-end: -2;
    }

    .tp-center-orphaned-grid-item-in-four-columns:nth-last-child(2):nth-child(4n + 2) {
        grid-column-end: 6;
    }

    .tp-center-orphaned-grid-item-in-four-columns:nth-last-child(3):nth-child(4n + 1) {
        grid-column-end: 4;
    }

    .tp-center-orphaned-grid-item-in-four-columns:last-child:nth-child(4n - 1) {
        grid-column-end: -2;
    }

    .tp-center-orphaned-grid-item-in-four-columns:nth-last-child(2):nth-child(4n + 1) {
        grid-column-end: 5;
    }

    .tp-center-orphaned-grid-item-in-four-columns:last-child:nth-child(4n + 1) {
        grid-column-end: 6;
    }

}