/* Neutralize the old horizontal-scroll card sizing (vw/vh widths, fixed margins)
   so .speaker-mob cards fill their Bootstrap column instead. Scoped to
   .speakers-row only — the desktop .speakers-list cards are untouched. */
.speakers-row .speaker-mob,
.speakers-row .speaker-mob.first,
.speakers-row .speaker-mob.first.last {
  width: 100%;
  height: 100%;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

/* .col-* is a flex item of .row (stretches to row height already), but its
   own child (.speaker-mob) only fills that height if the column itself is
   also a flex container. */
.speakers-row > .col-12.col-md-6.col-lg-4 {
  display: flex;
}

/* pin the social-icon row to the card bottom regardless of text length above */
.speakers-row .speakers-social-wrapper {
  margin-top: auto;
}

/* "more speakers" placeholder card: no photo, centered status text on a
   dark-green fill instead of the default card background. */
.speakers-row .speaker-mob.placeholder {
  background-color: #495049;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.speakers-row .speaker-mob.placeholder .placeholder-text {
  margin: 0;
  color: #c2cdc2;
  font-size: 17px;
  text-align: center;
}


.speaker-block {
    background-color: var(--nav-bar);
    padding: 1.5rem;
    margin-top: 1.5rem;
}
.speakers-block row {
	align-items: center;
}
.align-self-center {
align-self: center;
}
@media (min-width: 576px) and (max-width:991px) {
.speaker-block {
width: calc(50% - 1rem);
}
}