/* Keep the portrait photograph whole, with a separate space for the story. */
.brand-moment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 368px);
    align-items: center;
    gap: clamp(40px, 6vw, 100px);
    min-height: 0;
    padding: 48px max(6%, calc((100vw - 1200px) / 2));
    background: #f1f9fc;
    color: var(--ink);
}
.brand-moment::after { content: none; }
.brand-moment > img {
    position: static;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 16px;
    z-index: auto;
}
.brand-moment > div {
    grid-column: 1;
    grid-row: 1;
    max-width: 600px;
}
.brand-moment .eyebrow { color: var(--accent); }
.brand-moment h2 {
    font-size: clamp(34px, 3.4vw, 52px);
    max-width: 20ch;
    margin: 20px 0 30px;
}
.brand-moment em { color: var(--accent); }
.brand-moment .button.light {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.brand-moment .button.light:hover {
    background: #00658e;
    border-color: #00658e;
}
@media (max-width: 700px) {
    .brand-moment {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 44px 6%;
    }
    .brand-moment > img {
        grid-column: 1;
        grid-row: 2;
        width: min(100%, 320px);
        justify-self: center;
    }
    .brand-moment h2 { font-size: clamp(32px, 7vw, 40px); }
}