@media (max-width: 639px) {
    .namecard-intro-area {
        display: none;
    }

    .design-panel {
        width: 100% !important;
        padding: 28px 4px !important;
    }

    .mainimage-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

@media (min-width: 768px) {
    .upload-area {
        width: 280px !important;
    }
}
.intro-steps {
    max-width: 1100px !important;
    width: auto !important;
}
.main-image-card {
    width: 480px !important;
    height: 480px !important;
}
.side-images {
    height: 480px !important;
    width: 520px !important;
}
.side-image-card {
    width: 232px !important;
}
.side-image-card img {
    width: 230px !important;
    height: 230px !important;
    object-fit: cover;
}

/* ========== intro-steps 展示图等比缩放（中小分辨率如1440*900下整体等比缩小，左右高度始终一致）
   基准宽度 1024 = 480(主图) + 24(间距) + 520(侧图区)，选择器带前缀覆盖上方固定像素规则 */
.namecard-intro-area .intro-steps {
    width: 100% !important;
    max-width: 1024px !important;
    gap: 2.34375%; /* 24 / 1024 */
}

.namecard-intro-area .main-image-card {
    width: 46.875% !important; /* 480 / 1024 */
    height: auto !important;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.namecard-intro-area .side-images {
    flex: 1;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 520 / 480; /* 与主图高度保持一致 */
}

.namecard-intro-area .side-image-card {
    width: auto !important;
}

.namecard-intro-area .side-image-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.namecard-intro-area .arrow-icon {
    left: 28.32%; /* 290 / 1024，随容器等比定位 */
}
.namecard-card-wrap {
    padding-bottom: 100% !important;
}

.mainimage-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}
.namecard-load-more {
    padding: 2px 40px !important;
}

/* 示例按钮 */
.example-btn {
    display: inline-block;
    padding: 6px 18px;
    font-size: 13px;
    color: #666;
    background: #f2f2f2;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.example-btn:hover {
    background: #e6e6e6;
    color: #333;
}