/* MASTER-PACK prototype 0.7.10 mobile product-card corrections.
 * Staging only.
 *
 * Variants 2 and 3: a late shared desktop grid declaration was overriding the
 * earlier responsive stack and leaving a fixed text column on real phone
 * widths. Restore an explicit mobile two-row card.
 *
 * Variant 1: the card itself was stacked correctly, but the media grid item kept
 * its intrinsic minimum width and could render wider than the card on phone
 * widths. Explicitly allow the media/content items to shrink to the grid track.
 */

@media (max-width: 900px) {
    .mp-prototype-2 .mp-slide,
    .mp-prototype-3 .mp-slide {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
    }

    .mp-prototype-1 .mp-slide-media,
    .mp-prototype-1 .mp-slide-content,
    .mp-prototype-2 .mp-slide-media,
    .mp-prototype-3 .mp-slide-media,
    .mp-prototype-2 .mp-slide-content,
    .mp-prototype-3 .mp-slide-content {
        width: 100%;
        min-width: 0;
    }

    .mp-prototype-2 .mp-slide-media,
    .mp-prototype-3 .mp-slide-media {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .mp-prototype-2 .mp-slide-content,
    .mp-prototype-3 .mp-slide-content {
        border-left: 0;
    }
}

@media (max-width: 600px) {
    .mp-prototype-2 .mp-slide-media,
    .mp-prototype-3 .mp-slide-media {
        aspect-ratio: 16 / 11;
    }
}