.rpi-col-xs {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.rpi-col-xs .rpi-col {
    --col: 1;
    --gap: 0;
}

.rpi-col-x .rpi-col {
    --col: 2;
    --gap: 1;
}

.rpi-col-s .rpi-col {
    --col: 3;
    --gap: 2;
}

.rpi-col-m .rpi-col,
.rpi-col-l .rpi-col {
    --col: 4;
    --gap: 3;
}

.rpi-col-xl .rpi-col {
    --col: 5;
    --gap: 4;
}

.rpi-col {
    -ms-flex: 1 0 calc((100% - var(--card-gap, 16px)*var(--gap, 2)) / var(--col, 3));
    flex: 1 0 calc((100% - var(--card-gap, 16px)*var(--gap, 2)) / var(--col, 3));
    width: calc((100% - var(--card-gap, 16px)*var(--gap, 2)) / var(--col, 3));
}