.my-image-wrapper {
    display: flex;
    justify-content: center;
    margin: 1.5rem auto;
    max-width: 100%;
}

.my-img {
    display: block;

    height: auto;

    max-width: 100%;
    max-height: 500px;

    object-fit: contain;

    border-radius: 10px;
    border: 1px solid #e2e8f0;

    /* Base shadow - using Tailwind's "shadow" */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.my-image-wrapper:hover .my-img {
    transform: scale(1.02);
    /* Hover shadow - using Tailwind's "shadow-lg" */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
    cursor: zoom-in;
}

.my-image-row-wrapper {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 1rem;
    margin: 1.5rem 0;
}

.my-image-row-item { }

.my-image-row-wrapper:has(.my-image-row-item:first-child:nth-last-child(5)) {
    /* Override the default grid and create a 6-column grid for precise control */
    grid-template-columns: repeat(6, 1fr);
}

/* target the specific items inside that 5-item grid to create a visually pleasing 2-on-top, 3-on-bottom layout. */
.my-image-row-wrapper:has(.my-image-row-item:first-child:nth-last-child(5)) .my-image-row-item:nth-child(-n+2) {
    /*
     * Select the first two items (-n+2) and make them span 3 columns each.
     * 3 + 3 = 6, filling the first row perfectly.
    */
    grid-column: span 3;
}

.my-image-row-wrapper:has(.my-image-row-item:first-child:nth-last-child(5)) .my-image-row-item:nth-child(n+3) {
    /*
     * Select the remaining three items (n+3) and make them span 2 columns each.
     * 2 + 2 + 2 = 6, filling the second row perfectly.
    */
    grid-column: span 2;
}


.my-image-row-wrapper .my-image-wrapper {
    margin: 0;
    width: 100%;
    height: 100%;
}

.my-image-row-wrapper .my-img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

/* .my-profile-picture 已移至 about.css，使用玻璃态设计 */