/**
 * @file
 * Contacts paragraph and contact card styles for Save Mo Lives region pages.
 */

.sml-contacts {
  margin: 0;
}

.sml-contacts__cards {
  display: grid;
  gap: 1rem;
}

.sml-contacts__cards .field--name-field-contacts {
  margin: 0;
}

.sml-contact-card {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  margin: 0;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--sml-border);
}

.sml-contact-card:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sml-contact-card__media {
  width: 125px;
}

.sml-contact-card__media .field,
.sml-contact-card__media .field__item {
  margin: 0;
}

.sml-contact-card__media img {
  display: block;
  width: 125px;
  height: 125px;
  object-fit: cover;
}

.sml-contact-card__body {
  min-width: 0;
}

.sml-contact-card__name {
  margin: 0 0 0.4rem;
  color: var(--sml-black);
  font-family: var(--sml-font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
}

.sml-contact-card__title .field,
.sml-contact-card__department .field,
.sml-contact-card__info .field {
  margin: 0;
}

.sml-contact-card__title,
.sml-contact-card__department,
.sml-contact-card__info {
  color: var(--sml-black);
  font-family: var(--sml-font-jost);
  font-size: 1.1875rem;
  line-height: 1.4;
}

.sml-contact-card__department,
.sml-contact-card__info {
  margin-top: 0.15rem;
}

.sml-contact-card__title p,
.sml-contact-card__department p,
.sml-contact-card__info p {
  margin: 0;
}

.sml-contact-card__info a {
  color: var(--sml-link);
}

.sml-contact-card__info a:hover,
.sml-contact-card__info a:focus {
  color: var(--sml-link-hover);
}

@media (max-width: 1199px) {
  .sml-contact-card__name {
    font-size: 1.4rem;
  }

  .sml-contact-card__title,
  .sml-contact-card__department,
  .sml-contact-card__info {
    font-size: 1.0625rem;
  }
}

@media (max-width: 767px) {
  .sml-contact-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0.75rem;
  }

  .sml-contact-card__media {
    width: 96px;
  }

  .sml-contact-card__media img {
    width: 96px;
    height: 96px;
  }

  .sml-contact-card__name {
    margin-bottom: 0.25rem;
    font-size: 1.25rem;
  }
}

@media (max-width: 430px) {
  .sml-contact-card {
    grid-template-columns: 1fr;
  }
}