/* Final shared treatment for every proof/resource tile. Keep photographs
   compact and proportional instead of stretching them into shallow banners. */
.product-journey .pj-proof-grid .pj-proof-card,
.product-journey .pj-proof-grid:has(.pj-proof-card:nth-child(2)) .pj-proof-card {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 16px;
    align-items: start;
    padding: 14px;
    text-align: left;
}

.product-journey .pj-proof-grid .pj-proof-image,
.product-journey .pj-proof-grid:has(.pj-proof-card:nth-child(2)) .pj-proof-image {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 5;
    width: 124px;
    height: 100px;
    margin: 0;
    overflow: hidden;
    background: #dce4e7;
}

.product-journey .pj-proof-grid .pj-proof-image img,
.product-journey .pj-proof-grid:has(.pj-proof-card:nth-child(2)) .pj-proof-image img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

.product-journey .pj-proof-grid .pj-proof-card > span:not(.pj-proof-image),
.product-journey .pj-proof-grid .pj-proof-card > strong,
.product-journey .pj-proof-grid .pj-proof-card > p,
.product-journey .pj-proof-grid .pj-proof-card > b {
    grid-column: 2;
}

.product-journey .pj-proof-grid .pj-proof-card > p {
    margin: 6px 0;
}

@media (max-width: 480px) {
    .product-journey .pj-proof-grid .pj-proof-card,
    .product-journey .pj-proof-grid:has(.pj-proof-card:nth-child(2)) .pj-proof-card {
        grid-template-columns: 104px minmax(0, 1fr);
        column-gap: 12px;
        padding: 12px;
    }

    .product-journey .pj-proof-grid .pj-proof-image,
    .product-journey .pj-proof-grid:has(.pj-proof-card:nth-child(2)) .pj-proof-image {
        width: 104px;
        height: 88px;
    }
}