/*
 * 截图尺寸标准化样式
 * 用于统一处理不同高度的软件截图,保持页面布局整齐美观
 */

/* 并排截图容器 - 统一高度 */
.screenshot-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: start; /* 顶部对齐 */
}

/* 截图容器 - 限制最大高度 */
.screenshot-container {
    position: relative;
    width: 100%;
    max-height: 600px; /* 限制最大高度 */
    overflow: hidden;
    border-radius: 1rem;
}

/* 截图图片 - 保持比例并适配容器 */
.screenshot-img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain; /* 完整显示图片,不裁剪 */
    display: block;
}

/* 并排截图 - 固定高度版本(适用于需要严格对齐的场景) */
.screenshot-grid-fixed .screenshot-container {
    height: 350px; /* 固定高度 */
}

.screenshot-grid-fixed .screenshot-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 完整显示,不拉伸变形 */
}

/* 单独大图截图 - 不限制高度,保持原始比例 */
.screenshot-single {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .screenshot-container {
        max-height: 400px;
    }

    .screenshot-grid-fixed .screenshot-container {
        height: 350px;
    }
}

/* 可选: 使用aspect-ratio保持固定比例 */
.screenshot-aspect-16-9 {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
}

.screenshot-aspect-16-9 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.screenshot-aspect-4-3 {
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
}

.screenshot-aspect-4-3 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}