/* 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;
}

.ocf-about-grid figure img {
    width: 100%;
    height: var(--ocf-about-image-height);
    object-fit: cover;
}

.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);
    }

    .ocf-about-grid figure img {
        height: var(--ocf-about-image-height-mobile);
    }
}

/* 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); } }