/*
 * mod_csofficers
 *
 * Bootstrap 5.3 ships .ratio-1x1/4x3/16x9/21x9 only. These add the portrait
 * shapes. The image inside fills the box (.ratio > *) and crops with
 * .object-fit-cover, so every card is the same size whatever was uploaded.
 */
.csofficers-ratio-4x5 { --bs-aspect-ratio: 125%; }
.csofficers-ratio-3x4 { --bs-aspect-ratio: 133.3333%; }
.csofficers-ratio-2x3 { --bs-aspect-ratio: 150%; }
.csofficers-ratio-1x1 { --bs-aspect-ratio: 100%; }

.csofficers-card .ratio > img { object-position: center 25%; }

/*
 * Below lg the photo stacks above the text, capped so a one-column tablet
 * layout does not produce a screen-tall portrait. From lg the photo and the
 * name/role/chapter/year block sit side by side (.d-lg-flex), the block
 * centered on the photo; the bio runs full width below an <hr>.
 */
.csofficers-photo { max-width: 18rem; }

@media (min-width: 992px) {
    .csofficers-photo { flex: 0 0 40%; max-width: 16rem; }
    .csofficers-heading { min-width: 0; }
}

.csofficers-initials {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: .05em;
}