/* box.css */

/* 盒子样式 */
.col {
    flex: 0 1 auto; /* 使每个盒子均匀分布并占满可用空间 */
    width: 120px; /* 调整宽度 */
    height: 40px; /* 调整高度 */
    margin: 0px 5px 10px; /* 减少边距并在下方留出空间 */
    text-align: left; /* 文本左对齐 */
}

/* 盒子链接和图片样式 */
.box-link {
    text-decoration: none; /* 移除文本装饰 */
    color: inherit; /* 继承颜色 */
}

.box-img {
    padding: 3px; /* 减少内边距 */
    border: 1px solid #ddd; /* 添加边框 */
    border-radius: 5px; /* 调整圆角 */
    transition: transform 0.3s, box-shadow 0.3s; /* 添加过渡效果 */
    width: 100%; /* 盒子宽度占满父容器 */
    height: 100%; /* 高度占满父容器 */
    display: flex; /* 使用flexbox布局 */
    flex-direction: row; /* 水平排列 */
    align-items: center; /* 垂直居中对齐 */
    background-color: #f0f0f0; /* 设置背景颜色为浅灰色 */
}

.box-img img {
    width: 20px; /* 调整图片宽度 */
    height: 20px; /* 调整图片高度 */
    object-fit: cover; /* 保持图片比例 */
}

/* 清除浮动样式 */
.clear {
    flex-basis: 100%; /* 占据整行 */
    height: 0; /* 不占用高度 */
}