Сделал mixin для сетки в которой calc() странно считает!!!

Не могу понять что не правильно!!!

@mixin card-set($items: 1, $indentX: 32px, $indentY: $indentX) {
display: flex;
flex-wrap: wrap;
gap: $indentX $indentY;

& > [class*='__item'] {
flex-basis: calc((100% - $indentY * ($items - 1)) / $items);
}
}

на выходе так:

@media only screen and (min-width: 768px) {
.products__list {
flex-wrap: wrap;
gap: 168px 16px;
display: flex;
}

.products__list>[class*="__item"] {
flex-basis: calc(33.3333% - 10.6667px);
}
}

Hi, in this video Pure CSS Menu Hover Animation - HTML CSS Menu hover
you will learn how to create a nice looking navigation for your website.

Проблема в том, что вы используете умножение в выражении calc(). Умножение выполняется в первую очередь, поэтому сначала рассчитывается выражение $indentY * ($items - 1), которое равно 10.6667px. Затем это значение вычитается из 100%, что дает значение 89.3333%. Наконец, это значение делится на $items, которое равно 1.

Чтобы исправить это, вы должны изменить порядок операций в выражении calc(). Вот как это можно сделать:

flex-basis: calc((100% - (10.6667px * $items)) / $items);
В этом выражении сначала выполняется деление, а затем умножение. Таким образом, выражение будет вычислено следующим образом:

(100% - (10.6667px * $items)) / $items
= (100% - 10.6667px) / $items
= 89.3333% / 1
= 89.3333%
Это даст вам желаемый результат, то есть размер элемента будет равен 89.3333% ширины контейнера.

Вот как будет выглядеть ваш mixin после исправления:

@mixin card-set($items: 1, $indentX: 32px, $indentY: $indentX) {
display: flex;
flex-wrap: wrap;
gap: $indentX $indentY;
& > [class*='__item'] {
flex-basis: calc((100% - (10.6667px * $items)) / $items);
}
}
Вы можете проверить это, изменив значение $items на 2. В этом случае выражение calc() будет вычисляться следующим образом:

(100% - (10.6667px * 2)) / 2
= (100% - 21.3333px) / 2
= 78.6667% / 2
= 39.3333%
Это даст вам ожидаемый размер элемента, равный 39.3333% ширины контейнера.