/*
CTC Separate Stylesheet
Updated: 2026-07-22 13:02:53
*/
.middle-staff-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.middle-staff-card {
    flex: 0 0 calc(33.333% - 1.334rem); /* fixed 1/3 width */
  box-sizing: border-box;
  padding: 20px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background: #E3DDD1;
  border-radius: 5px;
}
.middle-staff-photo img {
  width: 100%;
  display: block;
  height: 360px;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
  margin-bottom: 10px;
}
.middle-staff-name {
  color: #360006;
  font-weight: bold;
  margin: 0.75rem 0 0.25rem;
}
.middle-staff-title {
  color: #525252;
  font-style: italic;
  margin: 0 0 0.5rem;
  font-size: 16px;
}
.elementary-staff-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.elementary-staff-card {
    flex: 0 0 calc(33.333% - 1.334rem); /* fixed 1/3 width */
  box-sizing: border-box;
  padding: 20px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background: #bed3dd;
  border-radius: 5px;
}
.elementary-staff-photo img {
  width: 100%;
  display: block;
  height: 360px;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
  margin-bottom: 10px;
}
.elementary-staff-name {
  color: #0c71c3;
  font-weight: bold;
  margin: 0.75rem 0 0.25rem;
}
.elementary-staff-title {
  color: #525252;
  font-style: italic;
  margin: 0 0 0.5rem;
  font-size: 16px;
}
.preschool-staff-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.preschool-staff-card {
    flex: 0 0 calc(33.333% - 1.334rem); /* fixed 1/3 width */
  box-sizing: border-box;
  
  
  
  
}
.preschool-staff-photo img {
  width: 100%;
  display: block;
  height: 400px;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  margin-bottom: 15px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.preschool-staff-name {
  color: #8300e9;
  font-weight: bold;
  margin: 0.75rem 0 0.25rem;
}
.preschool-staff-title {
  color: #f200da ;
  font-style: italic;
  margin: 0 0 0.5rem;
  font-size: 16px;
	font-weight: bold;
}
@media (max-width: 980px) {
  .middle-staff-card {
    flex: 1 1 calc(50% - 1rem); /* 2 per row tablet */
  }
  .elementary-staff-card {
    flex: 1 1 calc(50% - 1rem); /* 2 per row tablet */
  }
  .preschool-staff-card {
    flex: 1 1 calc(50% - 1rem); /* 2 per row tablet */
  }
}
@media (max-width: 600px) {
  .middle-staff-card {
    flex: 1 1 100%; /* 1 per row mobile */
  }
  .elementary-staff-card {
    flex: 1 1 100%; /* 1 per row mobile */
  }
  .preschool-staff-card {
    flex: 1 1 100%; /* 1 per row mobile */
  }
}