/* 通用布局 */
        .c-sidle-container {
            --s: 23px;
            display: flex;
            justify-content: space-between;
            width: 100%;
            /* 确保容器宽度不会超过屏幕 */
            flex-wrap: nowrap;
            /* 保证所有图片都在同一行 */
            overflow-x: auto;
            /* 如果屏幕过小，可以横向滚动 */
            box-sizing: border-box;
            /* 包括内边距和边框在内计算总宽度 */
            /* 默认手机端的左侧间距 */

            /* 默认手机端的右侧间距 */
            margin: 0 auto;
            max-width: 1470px;
        }

        .c-sidle-container figure {
            width: 30%;
            /* 每张图片占据三分之一的宽度，减去间距 */
            margin: 0;
            text-align: center;
            /* 居中文本 */
            /* margin-right: 8px; */
            /* 图片之间的间距为8px */
            box-sizing: border-box;
            /* 包括内边距和边框在内计算总宽度 */
            /* border: solid 1px #eee;
            padding: 10px; */
        }

        .c-sidle-container img {
            height: auto;
            /* 高度自动调整 */
            width: 100%;
            /* 宽度自适应 */
            object-fit: contain;
            /* 保证图片的比例不变 */
            display: block;
            /* 让图片成为块元素以便居中 */
            margin: 0 auto;
            /* 图片居中 */
            transition: all 0.3s ease;

        }

        .c-sidle-container figcaption {
            margin-top: 20px;
            /* 图片与标题之间的间距设置为2px */
            font-size: var(--s);
            /* 默认字体大小为23px */
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            /* 使用 Poppins SemiBold 字体 */
            white-space: nowrap;
            /* 保证标题不换行 */
            overflow: hidden;
            /* 防止文字溢出 */
            text-overflow: ellipsis;
            /* 如果文字太长，显示省略号 */
            color: #222222;
            /* 文字颜色为 #222222 */
        }

        /* Color Circles */
        .color-container {
            display: flex;
            justify-content: center;
            /* Center the colors */
            align-items: center;
            margin-top: 2%;
            flex-wrap: nowrap;
            /* Ensure no wrapping */
            gap: 5px;
            /* Space between the circles */
            width: 50%;
            /* Half the width of the poster */
            margin-left: auto;
            /* Center horizontally */
            margin-right: auto;
            /* Center horizontally */
        }

        .color {
            width: calc(100% / 8 - 5px);
            border-radius: 50%;
            border: 0.25px solid #D3D3D3;
            cursor: pointer;
            aspect-ratio: 1 / 1;
        }

        .color:hover {
            opacity: 0.8;
            /* Slight opacity change on hover */
        }

        /* 媒体查询 */
        /* ipad */
        @media screen and (max-width: 1520px) {
            .c-sidle-container {
                max-width: 98%;
                padding-left: 1%;
                padding-right: 1%;
                display: flex;

            }

            .c-sidle-container figcaption {
                font-size: calc(var(--s) - 2px);
                margin-top: 5px;

            }

            .color-container {
                gap: 3px;
            }

            .color {
                width: calc(100% / 8 - 3px);

            }
        }

        /** PC */
        .c-sidle-container {
            max-width: 1470px;
        }

        /* < ipad */
        @media screen and (max-width: 1000px) {
            .c-sidle-container {
                max-width: 100%;
                padding-left: 15px;
                padding-right: 15px;
                flex-direction: row;
            }

            .c-sidle-container figure {
                width: 33%;
                margin-bottom: 10px;

            }

            .c-sidle-container figcaption {
                font-size: calc(var(--s) - 2px);
                margin-top: 5px;

            }

            .c-sidle-container img {
                height: auto;
                /* 进一步缩小图片高度 */
                max-width: 100%;
            }

            .color-container {
                width: 70%;
                /* 8 colors take up 70% of the poster width */
                gap: 2px;
            }

            .color {
                width: calc(100% / 8 - 2px);
                /* Adjust size for mobile */
                /* padding-bottom: calc(100% / 8); */
                /* Maintain 1:1 aspect ratio */
            }
        }

        /* < ipad */
        @media screen and (max-width: 880px) {
            .c-sidle-container figcaption {
                font-size: calc(var(--s) - 4px);
                margin-top: 5px;

            }
        }

        /* < ipad */
        @media screen and (max-width: 480px) {
            .c-sidle-container figcaption {
                font-size: 13px;
                margin-top: 5px;

            }
        }