/* ===========================
   Products Container
   모든 제품 카드 부모 컨테이너
   max-width 970px
=========================== */
.products {
    display: flex;
    flex-direction: row;
    justify-content: center; /* 가운데 정렬 */
    gap: 10rem;                 /* 제품 카드 간 간격 */
    max-width: 970px;          /* 전체 컨테이너 최대 너비 */
    width: 100%;               /* 화면이 좁아지면 유동적 */
    margin: 0 auto;            /* 화면 중앙 정렬 */
    margin-top: 50px;
    margin-bottom: 150px;
}

/* ===========================
   Product Card
   product--sd, product--cfast는 modifier
=========================== */
.product {
    
}

/* ===========================
   Product Title Layout
   flex-column, 왼쪽 정렬 기본
=========================== */
.product__title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 190px;
    gap: 3.75rem; /* 60px */
    text-align: left;
}

.product__title-logo {
    width: 360px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Scalar CFast Logo 이미지만 확대 */
.product--cfast .product__title-logo {
    width: 270px;
}

/* ===========================
   Product Images
=========================== */
.product__images {
    display: flex;
    justify-content: center; /* 가로 중앙 */
    align-items: center;     /* 세로 중앙 */
    height: 240px;
    flex-wrap: nowrap;        /* 줄바꿈 방지 */
    margin-top: 1.5rem; 
}

.product__images img {
    max-height: 240px;  /* 기본 높이 */
    display: block;
    flex-shrink: 0;     /* flex 안에서 축소 방지 */
}

/* Scalar CFast 제품 이미지만 확대 */
.product--cfast .product__images img {
    width: 200px;
}

/* ===========================
   768px 이하 모바일 대응
   - 제품 카드 세로 정렬
   - title, images, description 중앙 정렬
   - description-sub 중앙 정렬
=========================== */
@media screen and (max-width: 768px) {
    .products {
        flex-direction: column;
        gap: 6.25rem; /* 100px */
    }

    .product__title,
    .product__images,
    .product__description {
        text-align: center;
    }

    .product__description-sub {
        justify-content: center;
    }

    /* 모바일에서 Scalar CFast 이미지 크기 SDXC와 동일 */
    .product--cfast .product__images img {
        max-height: 240px;
    }
}