@charset "utf-8";

.contact-card {
  align-self: center;
  background: white;
  border: 1px solid var(--gray-mid);
  border-radius: 1.5rem;
  box-shadow: var(--float);
  flex-direction: row;
  max-width: 780px;
  width: 100%;

  & > div {
    flex-direction: column;
    justify-content: space-between;
    padding: 4rem;
    width: 50%;
  }

  & dl {
    flex-direction: column;
  }

  & dt {
    font-weight: 600;

    &:not(:first-of-type) {
      margin-top: 1.5rem;
    }
  }

  & h5 {
    align-self: center;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
  }

  & dt,
  & dd,
  & a {
    line-height: 1.4;
  }
}

/* Vertical divider between the two halves of a contact card */
.connector {
  align-self: center;
  border-right: 1px dotted var(--gray-mid);
  height: 50px;
}

.contact-card-complete {
  background: var(--gray-off-white);
  padding: 8rem 0;
  width: 100%;

  & .brand-button {
    align-self: center;
    background: var(--color-6);
    height: 8rem;
    width: 8rem;
  }
}