/* 1) Page-wide wrapper so Omni can't mess with styles */
#faculty-list {
  /* optional: limits page width and centers content */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 2) Responsive grid container */
#faculty-list .faculty-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 across by default (desktop) */
  gap: 24px; /* space between cards */
}

/* 3) Breakpoints: 2 across on tablets, 1 across on phones */
@media (max-width: 1024px) {
  #faculty-list .faculty-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  #faculty-list .faculty-grid {
    grid-template-columns: 1fr;
  }
}

/* 4) Card basics (optional but nice) */
#faculty-list .faculty-item {
  display: flex;
  flex-direction: column;
  align-items: start;
}

/* 5) Headshot sizing: uniform, never squished, crop neatly */
#faculty-list .faculty-photo {
  width: 100% !important;     /* image fills its grid column */
  aspect-ratio: 4 / 5;        /* consistent portrait shape */
  height: auto !important;    /* respect proportions */
  object-fit: cover;          /* clean crop inside box */
  display: block;
  max-width: 100%;
}

/* 6) Tidy text below photo (optional) */
#faculty-list .faculty-item p {
  margin: 8px 0 0;
  line-height: 1.3;
}