how to calculate box-sizing in CSS to fit them in the container?

Question

I was playing with calc function and I tried to create a semi-responsive box with 3 columns in it without using flex-box or grid, and I intended to have 10px gap between the elements (cards) and also on the edges around.

I set the width of the container to 80vw and the gaps together give 40px so I set the padding of the container to 5px or 1 unit, the width of the cards to (80vw-40px)/3 and 5px margin on them all around since as I learnt on inline-blocks the margins do not collapse for some reason. For me the calc looks alright but I don't get the expected result, as the 3rd column won't show up. Please let me know why? Thanks in advance.

Here is the code:

:root {
  --box-width: calc((80vw - 40px) / 3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.card-container {
  margin: 20px;
  width: 80vw;
  background-color: slategray;
  padding: 5px;
}

.card {
  display: inline-block;
  background-color: #f1f1f1;
  width: var(--box-width);
  height: calc(var(--box-width) * 0.75);
  margin: 5px;
}

<div class=card-container>
  <div class=card>1</div>
  <div class=card>2</div>
  <div class=card>3</div>
  <div class=card>4</div>
  <div class=card>5</div>
  <div class=card>6</div>
  <div class=card>7</div>
  <div class=card>8</div>
  <div class=card>9</div>
</div>