.component-flight-album-gallery {
    container-type: inline-size;
    container-name: flight-album-gallery;

    :where(.flight-album-photos) {
        /* Column count lives on this element, not on the component, because the container
           queries below have to be able to change it -- a container query never matches the
           element that declares the container, and the component is the container. */
        --local-columns: 4;
        --local-gap: var(--size-x-small);

        position: relative;
        margin-block: 0 var(--size-medium);
    }

    /* Masonry measures the column width off .grid-sizer and the gutter off .gutter-sizer, so
       both stay in CSS and a breakpoint can move them. Neither renders anything itself. */
    :where(.grid-sizer, .gutter-sizer) {
        block-size: 0;
    }

    :where(.grid-sizer, .flight-album-photo) {
        inline-size: calc((100% - (var(--local-columns) - 1) * var(--local-gap)) / var(--local-columns));
    }

    :where(.gutter-sizer) {
        inline-size: var(--local-gap);
    }

    :where(.flight-album-photo) {
        /* Before the script runs -- and if it never does -- the floats give a plain, correct
           grid instead of one very tall column. Masonry takes over from there. */
        float: inline-start;
        margin-block-end: var(--local-gap);
    }

    :where(.flight-album-photo a) {
        display: block;
        border-radius: var(--border-radius-common);
        overflow: hidden;
        cursor: zoom-in;
        /* Scale the tile, not the image inside it. An image scaled past its own clipping box
           simply loses the edges that no longer fit; scaling the tile magnifies the same
           picture, so the hover never costs the reader any of the photo. */
        transition: transform 250ms ease;
    }

    :where(.flight-album-photo img) {
        display: block;
        inline-size: 100%;
        block-size: auto;
    }

    :where(.flight-album-photo a:hover),
    :where(.flight-album-photo a:focus-visible) {
        transform: scale(1.03);
        /* Masonry positions these absolutely, so a grown tile needs to sit above its neighbors. */
        position: relative;
        z-index: 1;
    }

    :where(.flight-album-more) {
        /* The grid floats its tiles, so without this the button would ride up beside them. */
        clear: both;
        display: flex;
        justify-content: center;
        padding-block: var(--size-small) var(--size-medium);
    }

    :where(.flight-album-more-link) {
        color: var(--color-brand-blue);
        font-weight: var(--font-weight-bold);
        text-decoration: underline;
    }
}

/* Same as the archive list: a main/ component gets no horizontal-padding class of its own, so
   below the point where the region can still center inside 112rem it needs an explicit gutter.
   112rem = content-width-large, 4rem = minimum-inline-padding. */
@container flight-album-gallery (inline-size < calc(112rem + 4rem + 4rem)) {
    :where(.component-flight-album-gallery > .component-wrapper > .region) {
        max-width: 100%;
        padding-inline: var(--minimum-inline-padding);
    }
}

@container flight-album-gallery (inline-size < 90rem) {
    .component-flight-album-gallery :where(.flight-album-photos) {
        --local-columns: 3;
    }
}

@container flight-album-gallery (inline-size < 60rem) {
    .component-flight-album-gallery :where(.flight-album-photos) {
        --local-columns: 2;
    }
}

@container flight-album-gallery (inline-size < 36rem) {
    .component-flight-album-gallery :where(.flight-album-photos) {
        --local-columns: 1;
    }
}