/*
 * AGENT staff interview responsive layout for 4 staff members.
 * Desktop (>= 992px): 4 columns x 1 row
 * Tablet  (768-991px): 2 columns x 2 rows
 * Mobile  (< 768px): 1 column x 4 rows
 */

/* Apply only when the fourth staff member exists. */
@media (min-width: 992px) {
  .agent-staff-grid.has-staff4 .agent-staff-card {
    width: 25%;
    float: left;
    clear: none;
  }

  .agent-staff-grid.has-staff4 .agent-staff-card:nth-child(3) {
    clear: none;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .agent-staff-grid.has-staff4 .agent-staff-card {
    width: 50%;
    float: left;
  }

  .agent-staff-grid.has-staff4 .agent-staff-card:nth-child(2n+1) {
    clear: left;
  }

  .agent-staff-grid.has-staff4 .agent-staff-card:nth-child(-n+2) {
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .agent-staff-grid.has-staff4 .agent-staff-card {
    width: 100%;
    float: none;
    clear: both;
  }

  .agent-staff-grid.has-staff4 .agent-staff-card:not(:last-child) {
    margin-bottom: 40px;
  }
}