.craftbox-store-badges {
    container: store-badges / inline-size;
    width: 100%;
    min-width: 0;
}

.craftbox-store-links {
    --store-badge-height: 28px;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    align-items: center;
    justify-content: center;
    column-gap: 16px;
    width: 100%;
}

.craftbox-store-links .store-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    line-height: 0;
    justify-self: center;
}

/* Narrow layout: Apple and Huawei above, Google centred below. */
.craftbox-store-links [data-store="apple"] {
    grid-column: 1;
    grid-row: 1;
}

.craftbox-store-links [data-store="appgallery"] {
    grid-column: 2;
    grid-row: 1;
}

.craftbox-store-links [data-store="google-play"] {
    grid-column: 1 / -1;
    grid-row: 2;
}

.craftbox-store-links a.store-badge img {
    display: block;
    height: var(--store-badge-height);
    width: auto;
}

/* Official SVG has no built-in clear space: reserve one quarter of its height. */
.craftbox-store-links a.google-play-badge {
    padding: calc(var(--store-badge-height) / 4);
}

/* Older page styles give this anchor a fixed 132px box. */
.craftbox-store-links a.app-gallery-badge {
    width: auto;
    height: auto;
}

.craftbox-store-links a.store-badge.app-gallery-badge img {
    width: calc(var(--store-badge-height) * 3);
    height: auto;
    max-height: var(--store-badge-height);
}

/* Android's alternative-install page has only the two Android stores. */
.craftbox-store-badges[data-store-count="2"] [data-store="google-play"] {
    grid-column: 1;
    grid-row: 1;
}

@container store-badges (min-width: 301px) {
    .craftbox-store-links {
        grid-template-columns: 1fr auto 1fr;
        column-gap: 8px;
        max-width: 360px;
        margin-inline: auto;
    }

    .craftbox-store-links [data-store="google-play"] {
        grid-column: 2;
        grid-row: 1;
    }

    .craftbox-store-links [data-store="appgallery"] {
        grid-column: 3;
    }

    .craftbox-store-badges[data-store-count="2"] .craftbox-store-links {
        grid-template-columns: repeat(2, max-content);
        max-width: none;
    }

    .craftbox-store-badges[data-store-count="2"] [data-store="appgallery"] {
        grid-column: 2;
    }
}

@container store-badges (min-width: 361px) {
    .craftbox-store-links {
        --store-badge-height: 32px;
    }
}

.store-download-alternative {
    text-align: center;
    margin: 8px 0;
}

@media (min-width: 769px) {
    .hero-store-badges .craftbox-store-links { margin-inline: 0; }
}