在媒体查询中设置CSS变量是否可靠？

Question

我正在构建一个响应式布局，在媒体查询中引用我的变量，如下所示：

.item {
    --width: calc(50% - 10px);
    width: var(--width);
    padding-top: calc(var(--width) * 0.75);
}

@media(min-width: 920px) {
    .item {
        --width: calc(33.3333% - 10px);
    }
}

@media(min-width: 1280px) {
    .item {
        --width: calc(25% - 10px);
    }
}

它可在Google Chrome浏览器中使用。如果我想坚持使用普通CSS，还有更好的方法吗？此解决方案有潜在的陷阱吗？