/* closing question above the contact card: same size as classic block titles, not hero-sized */
.contact-card-title {
  font-family: "Gelasio", serif;
  font-weight: var(--font-normal);
  font-size: 34px;
  line-height: 120%;
  max-width: 700px;
  margin: 0 auto 40px;
}

/* contact card with the question inside: photo left, question, person and actions right */
.contact-card-inline {
  display: flex;
  width: 100%;
}

.contact-card-inline-image {
  flex: 2;
  min-width: 0;
  min-height: 320px;
}

.contact-card-inline-image img {
  display: block;
  width: 100%;
}

.contact-card-inline-body {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 50px;
}

.contact-card-inline-title {
  margin: 0 0 30px;
  font-family: "Gelasio", serif;
  font-weight: var(--font-normal);
  font-size: 30px;
  line-height: 120%;
  /* no single word alone on the last line */
  text-wrap: pretty;
}

.contact-card-inline-small {
  margin: 0;
  font-size: var(--font-xxs);
}

/* after .contact-card-inline-small: both sit on the actions row, this margin-top must win */
.contact-card-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
}

/* looks like a link, not like the pill buttons */
button.email-reveal {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: var(--dark-petrol);
  text-decoration: underline;
}

button.email-reveal:hover {
  color: var(--raspberry);
}

@media (max-width: 1025px) {
  .contact-card-inline {
    flex-direction: column;
  }

  .contact-card-inline-image {
    max-height: 500px;
    overflow: hidden;
  }
}