/* .container {
    background: #0c5cbe9d;
    margin: 50px 200px 0 200px;
} */

.card-container {
    margin: 50px 0 0 0;
    display: flex;
    flex-flow: row wrap;
    flex-wrap: wrap;
    align-content: flex-start;
    text-align: center;
}

.card-container .content {
    text-align: center;
}

.card-container .card {
    display: flex;
    /* 设置为 flexbox 布局 */
    align-items: center;
    /* 垂直方向对齐 */
    width: 280px;
    /* 固定宽度，或者根据需要调整 */
    padding: 10px;
    /* 添加内边距 */
    border-radius: 50px;
    background: var(rgb(255, 255, 255), rgba(255, 255, 255, 0));
    border: 2px solid var(--md-primary-fg-color--light, rgb(255, 255, 255));
    margin: 5px;
    /* 卡片之间的间距 */
    /* box-shadow: 0 4px 8px rgb(255, 255, 255); */
}

.card-container .card .content {
    padding-left: 6px;
    text-align: center;
}

.card-container .card .content h3 {
    font-size: 1.8em;
    z-index: 1;
    text-align: center;
}

/* .card-container .card .content p {
    font-size: 1em;
    font-weight: 300;
} */

.card-container .card .content a {
    position: relative;
    display: inline-block;
    color: var(#fff, --md-primary-fg-color--light);
    outline: none;
}

.card-container .card .content a:hover {
    /* background: #fff; */
    color: var(#3355ff, --md-primary-fg-color--light);
}

.card-container .card .img-container {
    width: 50px;
    /* 图片容器宽度 */
    height: 50px;
    /* 图片容器高度 */
    margin-right: 0px;
    /* 图片和文字之间的间距 */
    /* flex-shrink: 20px; */
    /* 防止图片缩小 */
    overflow: hidden;
    display: flex;
    /* 使用 flex 布局 */
    align-items: center;
    text-align: center;
    /* border-radius: 70%; */
    /* border: 2px solid rgba(255, 255, 255, 0.5); */
    /* 如果需要圆形图片 */
}

.card-container .card .img-container a {
    position: relative;
}

.card-container .card .img-container img {
    width: 100%;
    /* 图片适应容器宽度 */
    height: 100%;
    /* 图片适应容器高度 */
    object-fit: cover;
    /* 确保图片按比例填充 */
}