/* ════════════════════════════════════════════════
    Scattered collage layout
    ════════════════════════════════════════════════ */

.microsoft-image-group-wrapper {
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 4rem 2rem;
}

.microsoft-image-group {
    position: relative;
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
}

.microsoft-image-group .microsoft-image {
    position: absolute;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s ease;
}

.microsoft-image-group .microsoft-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Individual positions (desktop) ── */

/* Image 1: Cart item — far left, upper area */
.microsoft-image-group .microsoft-image:nth-child(1) {
    width: 24%;
    top: 0%;
    left: 0%;
    transform: rotate(-4deg);
    z-index: 2;
}

/* Image 2: Order summary — far right, tall */
.microsoft-image-group .microsoft-image:nth-child(2) {
    width: 28%;
    top: -5%;
    right: 0%;
    transform: rotate(3deg);
    z-index: 3;
}

/* Image 3: Product card — bottom left */
.microsoft-image-group .microsoft-image:nth-child(3) {
    width: 22%;
    bottom: -5%;
    left: 12%;
    transform: rotate(2.5deg);
    z-index: 4;
}

/* Image 4: Features block — center top */
.microsoft-image-group .microsoft-image:nth-child(4) {
    width: 26%;
    top: 5%;
    left: 37%;
    transform: rotate(-2deg);
    z-index: 5;
}

/* Image 5: Order status — bottom center-right, landscape */
.microsoft-image-group .microsoft-image:nth-child(5) {
    width: 30%;
    bottom: 0%;
    right: 12%;
    transform: rotate(-2.5deg);
    z-index: 1;
}

/* Hover lift */
.microsoft-image-group .microsoft-image:hover {
    box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 10;
}

.microsoft-image-group .microsoft-image:nth-child(1):hover { transform: rotate(-4deg) translateY(-4px) scale(1.02); }
.microsoft-image-group .microsoft-image:nth-child(2):hover { transform: rotate(3deg) translateY(-4px) scale(1.02); }
.microsoft-image-group .microsoft-image:nth-child(3):hover { transform: rotate(2.5deg) translateY(-4px) scale(1.02); }
.microsoft-image-group .microsoft-image:nth-child(4):hover { transform: rotate(-2deg) translateY(-4px) scale(1.02); }
.microsoft-image-group .microsoft-image:nth-child(5):hover { transform: rotate(-2.5deg) translateY(-4px) scale(1.02); }