/* About (homepage): photo beside the copy. */
.ocf-about {
    background: var(--cardinal-bg-alt);
}

.ocf-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ocf-split-gap);
    align-items: center;
}

.ocf-about-grid figure {
    margin: 0;
    overflow: visible;
}

.ocf-about-grid figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: initial;
    border-radius: inherit;
}

.ocf-about-grid .heading-2 {
    margin-bottom: calc(var(--ocf-grid-gap) * 0.75);
}

.ocf-about-grid li {
    margin: calc(var(--ocf-grid-gap) * 0.25) 0;
}

.ocf-about-grid .prose ul {
    padding-left: calc(var(--ocf-grid-gap) * 0.75);
}

@media (max-width: 767px) {
    .ocf-about-grid {
        grid-template-columns: 1fr;
        gap: calc(var(--ocf-grid-gap) * 1.25);
    }
}

/* Cardinal: copy column with a text link to the About page; list markers in the primary color. */
.ocf-about-grid .prose ul { list-style: none; padding-left: 0; }
.ocf-about-grid .prose li { position: relative; padding-left: calc(var(--ocf-space-unit) * 1.25); }
.ocf-about-grid .prose li::before {
    content: '';
    position: absolute;
    top: 0.62em;
    left: 0;
    width: calc(var(--ocf-space-unit) * 0.4375);
    height: calc(var(--ocf-space-unit) * 0.4375);
    background: var(--ocf-primary);
}
.ocf-about-grid .prose li strong { color: var(--ocf-heading); }
.ocf-about-link { margin-top: calc(var(--ocf-grid-gap) * 0.5); }
@media (min-width: 768px) { .ocf-about-grid { grid-template-columns: minmax(0, 600fr) minmax(0, 608fr); } }

/* OCF_AGENT_BLOCK:homepage-about-contrast START */
.ocf-about .eyebrow {
    color: #FFD400;
    background: transparent;
    box-shadow: none;
}

.ocf-about .heading-2 {
    color: #FFFFFF;
    background: transparent;
    box-shadow: none;
}

.ocf-about .eyebrow mark,
.ocf-about .heading-2 mark {
    color: inherit;
    background: transparent;
}

.ocf-about .prose,
.ocf-about .prose p,
.ocf-about .prose li {
    color: #FFFFFF;
}

.ocf-about .prose li strong {
    color: #FFD400;
}

.ocf-about .prose li::before {
    background: #FFD400;
}

.ocf-about .ocf-about-link,
.ocf-about .ocf-about-link > span[aria-hidden="true"] {
    color: #FFD400;
}

.ocf-about .ocf-about-link:hover,
.ocf-about .ocf-about-link:hover > span[aria-hidden="true"] {
    color: #FFFFFF;
}
/* OCF_AGENT_BLOCK:homepage-about-contrast END */

