/* Only the introductory product row breaks out of the standard container. */
@media (min-width: 1200px) {
    .container > .row > .col-12 > .row:has(> .col-12 > .mall-product__name) {
        width: calc(100vw - 64px);
        margin-inline: calc((100% - (100vw - 64px)) / 2);
    }

    .container > .row > .col-12 > .row:has(> .col-12 > .mall-product__name):has(> .col-12 > .pelco-product-gallery-layout:not(.pelco-product-gallery-layout--stacked)) {
        justify-content: center;
    }

    /* 640px main photo + 256px gallery + 24px of existing column gutters. */
    .container > .row > .col-12 > .row:has(> .col-12 > .mall-product__name)
    > .col-12:has(> .pelco-product-gallery-layout:not(.pelco-product-gallery-layout--stacked)) {
        max-width: 920px;
    }
}

.pelco-product-gallery-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.pelco-product-gallery-layout > .pelco-product-gallery-column {
    width: 100%;
    min-width: 0;
}

.pelco-product-gallery-layout .tt-product-gallery-scroll--side {
    max-height: 500px !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.pelco-product-gallery-layout .tt-product-gallery--left,
.pelco-product-gallery-layout .tt-product-gallery--right {
    grid-template-columns: repeat(2, minmax(0, var(--pelco-gallery-thumb-size, 106px)));
    justify-content: center;
    column-gap: 0.5rem;
}

.pelco-product-gallery-layout--stacked {
    grid-template-columns: minmax(0, 1fr);
}

.pelco-product-gallery-layout--stacked > .pelco-product-gallery-main {
    order: 0;
}

.pelco-product-gallery-layout--stacked > .pelco-product-gallery-side {
    order: 1;
}

@media (min-width: 1200px) {
    /* Two 106px thumbnails, gap, column padding and room for the scrollbar. */
    .pelco-product-gallery-layout:not(.pelco-product-gallery-layout--stacked) {
        grid-template-columns: minmax(0, 1fr) 256px;
    }

    .pelco-product-gallery-layout:not(.pelco-product-gallery-layout--stacked)
    > .pelco-product-gallery-main .tt-product-main-image-badge-wrap {
        margin-left: auto;
        margin-right: 0;
    }

    .pelco-product-gallery-layout:not(.pelco-product-gallery-layout--stacked):has(> .pelco-product-gallery-side:first-child) {
        grid-template-columns: 256px minmax(0, 1fr);
    }

    .pelco-product-gallery-layout:not(.pelco-product-gallery-layout--stacked):has(> .pelco-product-gallery-side:first-child)
    > .pelco-product-gallery-main .tt-product-main-image-badge-wrap {
        margin-left: 0;
        margin-right: auto;
    }
}