.gallery-top {
    position: relative;
    padding-top: 140px;
    padding-bottom: 40px;
}
.gallery-top h1 {
    font-size: 4.0rem;
    font-weight: 300;
    text-align: center;
    margin-inline: auto;
    max-width: 860px;
    color: rgba(var(--color-headings), 0.9);
}
.gallery-top h1 span {
    font-weight: 500;
    font-style: italic;
    color: rgba(var(--color-red), 1);
}
.gallery-top p {
    font-size: 1.35rem;
    line-height: 140%;
    text-align: center;
    margin-inline: auto;
    max-width: 900px;
    padding-inline: 16px;
    text-wrap: balance;
    margin-bottom: 0;
}
@media (max-width: 575.98px) {
    .gallery-top {
        padding-top: 120px;
    }
    .gallery-top h1 {
        font-size: 2.75rem;
        margin-bottom: 0;
    }
}

/* Masonry: CSS columns, 1 on xs, 2 on sm-lg, 3 on xl+ */
.gallery-grid-wrap {
    padding-bottom: 80px;
}
.gallery-grid {
    column-count: 1;
    column-gap: 24px;
}
@media (min-width: 576px) {
    .gallery-grid { column-count: 2; }
}
@media (min-width: 1200px) {
    .gallery-grid { column-count: 3; }
}
.gallery-item {
    display: block;
    margin-bottom: 24px;
    break-inside: avoid;
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
    text-decoration: none;
}
.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}
.gallery-item:not(.gallery-item-mobile):hover img,
.gallery-item:not(.gallery-item-mobile):focus-visible img {
    transform: scale(1.02);
}

/* Faux phone for mobile screenshots. The phone is a size container, so everything inside it is
   sized in cqw (1cqw = 1% of the phone's width) and keeps its proportions at any size. The
   screenshot starts below a status bar strip, as on a real iPhone, so the Dynamic Island never
   covers page content. Colour: dark silver ("graphite") metal rim around a black glass bezel. */
.phone {
    position: relative;
    display: block;
    container-type: inline-size;
    background: linear-gradient(145deg, #9a9fa6 0%, #5f646b 35%, #7d828a 65%, #4e5258 100%);
    border-radius: 15% / 7%;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0 18px 40px rgba(0, 0, 0, 0.28);
}
.phone-screen {
    position: relative;
    display: block;
    margin: 2.4cqw;
    border: 2.4cqw solid #000;
    border-radius: 12.8cqw;
    overflow: hidden;
    background: #000;
}
.phone-status {
    display: none;
}
.phone-screen .phone-status {
    /* 54pt status bar on a 390pt-wide screen */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    aspect-ratio: 390 / 54;
    padding: 0 7cqw 0 9cqw;
    color: #fff;
    font-size: 3.6cqw;
    font-weight: 600;
    line-height: 1;
}
.phone-island {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 29%;
    height: 66%;
    background: #000;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px #1c1c1c;
}
.phone-icons {
    display: flex;
    gap: 1.2cqw;
    font-size: 3.2cqw;
}
.phone-screen img {
    display: block;
    width: 100%;
    height: auto;
}
.gallery-item-mobile {
    display: flex;
    justify-content: center;
    padding: 36px 0;
    overflow: visible; /* don't clip the phone's drop shadow at the tile edge */
}
.gallery-item-mobile .phone {
    width: 62%;
    transition: transform 0.3s ease;
}
.gallery-item-mobile:hover .phone,
.gallery-item-mobile:focus-visible .phone {
    transform: scale(1.03);
}

/* Lightbox */
.gallery-lightbox .modal-content {
    background: transparent;
    border: 0;
    position: relative;
    align-items: center;
}
.gallery-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 3.5rem);
    width: auto;
    height: auto;
}
.gallery-lightbox-frame.phone {
    /* A size container cannot shrink-wrap its content, so give it a width from the viewport
       height: the whole phone is about 2.2x as tall as it is wide. */
    width: min(92vw, calc((100vh - 4rem) / 2.2));
}
.gallery-lightbox-frame.phone .gallery-lightbox-img {
    width: 100%;
    max-height: none;
}
.gallery-nav.gallery-close {
    /* shares .gallery-nav's dark circle; override its vertical centring */
    top: 12px;
    right: 12px;
    transform: none;
}
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.1rem;
}
.gallery-nav:hover { background: rgba(0, 0, 0, 0.8); }
.gallery-prev { left: 8px; }
.gallery-next { right: 8px; }
/* Bootstrap appends the backdrop to <body>, outside the modal; gallery.css only loads on /gallery. */
.modal-backdrop {
    --bs-backdrop-opacity: 0.7;
}