/* ...existing code... */

/* variables */
:root{
  --page-bg: #0b1220;
  --card-bg: #ffffff;
  --card-bg-small: #f7f3e9;
  --accent: #6c5ce7;
  --text: #111;
}

/* page */
body{
  margin:0;
  font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(180deg,#071026 0%,var(--page-bg) 100%);
  color:#fff;
}

/* grid that wraps into full cards only */
.yearbook-grid{
  max-width:1200px;
  margin: 32px auto;
  padding: 20px;
  display: grid;
  gap: 20px;
  /* default: cards are at least 240px, auto-fit makes only full cards */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}

/* card */
.card{
  background: var(--card-bg);
  color: var(--text);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
  min-height: 320px; /* keep cards consistent height */
}

/* image */
.card .photo{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* body inside card */
.card .card-body{
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.card .name{ margin: 0; font-weight: 700; color: var(--accent); font-size: 1.05rem; }
.card .quote{ margin: 0; color: #444; font-style: italic; flex: 1; }
.card .most{ margin: 0; color: #666; font-weight: 600; }

/* hover */
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(2,6,23,0.75);
}

/* ensure images scale when card width changes */
.card img{ display:block; max-width:100%; height:auto; }

/* Explicit breakpoints so rows contain full cards (nice control) */
@media (min-width:1200px){
  .yearbook-grid{ grid-template-columns: repeat(4, 1fr); } /* 4 cards/row on large screens */
}
@media (min-width:900px) and (max-width:1199px){
  .yearbook-grid{ grid-template-columns: repeat(3, 1fr); } /* 3 cards/row */
}
@media (min-width:600px) and (max-width:899px){
  .yearbook-grid{ grid-template-columns: repeat(2, 1fr); } /* 2 cards/row */
}
@media (max-width:599px){
  .yearbook-grid{ grid-template-columns: 1fr; } /* 1 card/row */
}

/* change card background color on very small screens (<500px) */
@media (max-width:499px){
  .card{
    background: var(--card-bg-small);
    color: #052; /* darker text for contrast */
  }
}

/* ...existing code... */