/* 重置默认样式，避免浏览器差异 */
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 外层容器：居中展示，增加内边距 */
.qrcode-container {
    width: 100%;
    max-width: 800px; /* 电脑端最大宽度，避免太宽 */
    margin: 20px auto;
    padding: 0 20px;
}

/* 图片父容器：核心响应式布局 */
.qrcode-group {
    display: flex;
    /* 默认（电脑端）横向排列，两端对齐，有间距 */
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 20px; /* 图片之间的间距 */
    flex-wrap: wrap; /* 防止极端窄屏挤变形 */
}

/* 每个二维码容器：控制尺寸 */
.qrcode-item {
    flex: 1; /* 电脑端平分宽度 */
    min-width: 150px; /* 最小宽度，避免太窄 */
    max-width: 200px; /* 最大宽度，避免太大 */
}

/* 二维码图片：自适应容器大小 */
.qrcode-item img {
    width: 100%;
    height: auto; /* 保持宽高比 */
    display: block; /* 去除图片默认的行内空白 */
}

/* 媒体查询：手机端适配（屏幕宽度≤768px） */
@media (max-width: 768px) {
    .qrcode-group {
        flex-direction: column; /* 竖向排列 */
        gap: 30px; /* 手机端增加上下间距 */
    }

    .qrcode-item {
        max-width: 250px; /* 手机端图片稍大 */
    }
}