.card {
    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;
}

.card:hover {
    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: pointer;
}

.card .rounded-start {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 225px; /* 设置最大高度 */
}

.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 {
    width: 350px;
    height: 350px;
    object-fit: cover;

    display: block;
    margin: 1.5rem auto;

    border-radius: 10%;
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.15),
                0 8px 12px -4px rgba(0, 0, 0, 0.08);

    max-width: 100%;
}