.wixel-container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--component-spacing);

    padding-left: var(--padding-lr);
    padding-right: var(--padding-lr);
    max-width: var(--custom-content-max-width);

    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--margin-tb, 2rem);
    margin-bottom: var(--margin-tb, 2rem);
    /* Space between items */
}

.wixel-item {
    width: 100%;
    height: 30vw;
   
    /* Fixed height for the cards */
    position: relative;
    overflow: hidden;
    /* Prevent horizontal scrollbar from animation */
}

.wixel-inner {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 3rem;
    /* Add gap between columns */
}

/* --- Item 1 & 3 --- */
.wixel-item .container-a1 {
    width: calc(55% - 2rem);
    /* Adjust for gap */
    position: relative;
    /* overflow: hidden;  Maybe needed? Let's see */
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    /* Prevent shrinking */
    /* Align to right so it expands left? No, req says "Start offset to right into A-2 area" */
}

.wixel-item .container-a2 {
    width: calc(45% - 2rem);
    /* Adjust for gap */
    position: relative;
    flex-shrink: 0;
    /* Prevent shrinking */
}

/* --- Item 2 & 4 --- */
.wixel-item .container-row2-left {
    width: calc(45% - 2rem);
    /* Adjust for gap */
    position: relative;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.wixel-item .container-row2-right {
    width: calc(55% - 2rem);
    /* Adjust for gap */
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-shrink: 0;
    /* Prevent shrinking */
}


/* --- Cards --- */
.card-a {
    height: 100%;
    background-color: var(--card-bg);
    width: 0%;
    /* Initial state */
    position: absolute;
    top: 0;
    z-index: 2;
    border-radius: 2rem;
    /* On top of B? Or just distinct. */
    overflow: hidden;
}

.card-a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-b {
    width: 100%;
    height: 100%;
    background-color: var(--card-bg);
    border-radius: 3rem;
    position: relative;
    /* Needed for z-index */
    z-index: 3;
    /* Higher than card-a (2) */
    /* Default, will be random in JS or inline */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 5% 12%;
    box-sizing: border-box;
}

/* Card Content Styling */
.card-title {
    font-size: var(--title-size);
    color: var(--title-color);
    margin-bottom: 2rem;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: 90%;
}

.card-desc {
    font-size: var(--desc-size);
    color: var(--desc-color);
    line-height: 1.6;
    margin-bottom: 3rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    
}

.card-btn {
    display: inline-block;
    padding: 1.5rem 4rem;
    border: 1px solid var(--btn-color);
    color: var(--btn-color);
    text-decoration: none;
    /* font-weight: bold; */
    font-size: var(--button-size, 1.6rem);
    transition: all 0.3s ease;
    border-radius: 3rem;
}

.card-btn:hover {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}

/* Specific positioning logic based on requirements */

/* Item 1:
   - A-1 (55%): Card A. Default width 0. Start offset to right into A-2 area.
   - A-2 (45%): Card B.

   Interpretation: Card A sits in A-1 container.
   "Start offset to right into A-2 area" -> This implies it might be physically positioned in A-2 initially or just looks like it.
   "Slide direction Right to Left".
   "Until black card fully displays, corresponding area container".

   Let's anchor Card A to the RIGHT side of Container A-1.
*/
.container-a1 .card-a {
    right: 0;
    /* Anchored to the border between A1 and A2 */
    /* It needs to "move to corresponding area".
       If it starts "offset into A-2", maybe it uses transform?
       Let's try: It grows from 0 to 100% width.
       If it's anchored right, it grows leftwards. This matches "Right to Left".

       Wait, "Start offset to right into A-2 area".
       If width is 0, it's invisible.
       Maybe `transform: translateX(100%)` initially?
       But it says "width 0".

       Let's assume the effect is: It looks like it comes out from the middle divider.
*/
}

/* Item 2:
   - Row 2 Left (45%): Card B.
   - Row 2 Right (55%): Card A.
   - "Start offset to left into A-1 area".
   - "Slide direction Left to Right".
   
   Anchor Card A to the LEFT side of Container Row 2 Right.
*/
.container-row2-right .card-a {
    left: 0;
}

/* Random colors for Card B - handled in CSS for simplicity or JS */
.wixel-item .card-b {
    
}

/* 平板（Pad）样式，适用于平板设备的样式 */
@media (min-width: 768px) and (max-width: 1200px) {
    .card-title {
        font-size: calc(var(--title-size) * .95);
    }
    .card-desc {
        font-size: calc(var(--desc-size) * .95);
    }
    .wixel-item{
        min-height: 40vw;
    }
}

/* 手机端样式 */
@media (max-width: 960px) {
    .wixel-item {
        height: auto;
       
    }

    .wixel-container{
        gap:calc(var(--component-spacing) * .8);
        padding-left:2rem;
        padding-right:2rem;
    }

    .wixel-inner {
        flex-direction: column;
        gap: 5rem;
    }

    /* Reverse order for Type B so Image is on Top */
    /* Type B has .container-row2-right as Image. By default it is second child.
       In column layout, we want it on top. So order: -1.
    */
    .wixel-item .container-row2-right {
        order: -1;
    }

    /* Reset widths for all containers to 100% */
    .wixel-item .container-a1, 
    .wixel-item .container-a2, 
    .wixel-item .container-row2-left, 
    .wixel-item .container-row2-right {
        width: 100%;
        display: block;
        flex-shrink: 0;
    }

    /* Image Containers */
    .wixel-item .container-a1, 
    .wixel-item .container-row2-right {
        height: 60vw; /* Fixed height for image area on mobile */
        overflow: hidden;
        position: relative;
        border-radius: 2rem;
        z-index: 10;
    }

    /* Content Containers */
    .wixel-item .container-a2, 
    .wixel-item .container-row2-left {
        height: auto;
        margin-top: -3rem; /* Pull content up to cover potential gap */
        position: relative;
        z-index: 5;
    }

    /* Card B styling */
    .card-b {
        border-radius: 2rem;
        padding: 3rem 3rem 3rem 3rem; /* Increase top padding to account for overlap if needed, or just keep it spacious */
    }

    /* Card A (Image) styling */
    .card-a {
        width: 100% !important; /* Force width */
        height: 100%;
        position: absolute;
        top: 0;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0; /* Container handles radius */
    }
    
    .card-title {
        font-size: calc(var(--title-size) * .9);
    }
    .card-desc {
        font-size: calc(var(--desc-size) * .9);
    }
}