/* One real Blender composition; its perspective and overlap are in the image. */
.product-page--shotlists .shotlists-device-composition {
    display: block;
    width: 100%;
    max-width: 650px;
}

.product-page--shotlists .shotlists-device-composition img {
    display: block;
    width: 100%;
    height: auto;
}

/* Keep the phones cropped at the section edge without inheriting the shared
   hero's tall minimum height, which leaves a large empty band above them. */
.product-page--shotlists .product-hero {
    min-height: auto;
    padding-top: 48px;
    padding-bottom: 0;
}

.product-page--shotlists .product-hero__visual {
    align-self: end;
}

@media (max-width: 700px) {
    .product-page--shotlists .product-hero {
        padding-top: 36px;
    }
}