:root{
    --gap: 10px;  /* 把间距也抽成变量，方便统一修改 */
}
.flexphoto {
    display: flex;
    gap: var(--gap); /* 使用变量统一控制间距 */
    flex-wrap: wrap;
    padding: 0;
    margin: 10px 0;
}
.flexphoto figure {
    margin: 0 !important;
    flex: 1;
}
.flexphoto figure img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    max-height: 100%;
}

.flexphoto.diycol figure {
    flex: none;
    /* 正确计算宽度：100%均分 - 分摊的间距 */
    width: calc((100% / var(--col-num)) - (var(--gap) * (var(--col-num) - 1) / var(--col-num)));
    /* 关键：给figure设置最小高度，避免img的height:100%无参考 */
}
.flexphoto.diycol{
--col-num: var(--desktop-col, 4); 
}

/* 平板端（≤1024px）：读取data-tablet-col */
@media (max-width: 1024px) {
.flexphoto.diycol {
    --col-num: var(--tablet-col, 3);
  }
}

/* 手机端（≤768px）：读取data-mobile-col */
@media (max-width: 768px) {
.flexphoto.diycol {
    --col-num: var(--mobile-col, 2);
  }
}