Magical Formula for equal width columns CSS

/* add this to the flex basis of the card
calc((100% / var(--cols)) - (var(--gap) * (var(--cols) - 1)) / var(--cols))
*/

/* add this to the column gap and row gap of the parent container of the card
var(--gap)
*/


/*add this to the custom CSS of parent container of the card */

root {
  --gap: 2rem;
  --cols: 4;
}

@media (max-width:1240px) {
root {
    --cols: 3;
  }
}


@media (max-width:960px) {
root {
    --cols: 2;
  }
}

@media (max-width:580px) {
root {
    --cols: 1;
  }
}

/* set the parent container flex wrap to 'wrap', and direction to 'Horizontal(row)'*/