/* MacPing page: a window app with a menu bar panel too, so some steps show
   the wide window and some a taller sheet or the panel */

/* Mint hero, to match the icon */
.ma-hero.mp-hero {
    background: var(--mint);
}

.mp-wide.ma-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

/* Copy above a wide screenshot, never beside it */
.mp-wide.ma-step:nth-child(even) .ma-step-copy {
    order: 0;
}

.mp-wide .ma-step-copy {
    max-width: 46em;
}

.ma-panel.mp-window,
.ma-step .ma-panel.mp-window {
    max-width: 100%;
    justify-self: stretch;
    border-radius: 14px;
}

/* Sheets and smaller windows (add hosts, traceroute, history, settings) */
.ma-step .ma-panel.mp-sheet {
    max-width: 440px;
    border-radius: 16px;
}

.ma-gallery .ma-panel.mp-window,
.ma-gallery .ma-panel.mp-sheet {
    border-radius: 10px;
}

/* The menu bar strip above the panel */
.mp-stack {
    display: grid;
    gap: 24px;
    justify-items: center;
}

.mp-stack .ma-shot {
    max-width: 336px;
}

/* Gallery: the wide window beside the panel, rather than three equal columns */
@media (min-width: 861px) {
    .ma-gallery-strip.mp-gallery {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    .mp-gallery figure.mp-wide-figure {
        width: 82vw;
        max-width: 420px;
    }
}

/* Credit to vmPing */
.mp-credit {
    background: #fff;
    border-radius: 32px;
    padding: 40px;
}

.mp-credit h2 {
    font-size: clamp(36px, 5vw, 56px);
    margin: 8px 0 14px;
}

.mp-credit p.ma-mono {
    max-width: 44em;
    line-height: 1.6;
}

.mp-credit a {
    color: var(--ink);
}