/* Give the three portraits the same proportions without modifying the photos. */
.greetings .greeting .greeting-portrait {
  display: block;
  width: 155px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 50% 50%;
}

/* The president sits on the right; the other two profiles keep their layout. */
.greeting--portrait-right {
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: "letter person";
}

.greeting--portrait-right > .greeting-person {
  grid-area: person;
  justify-self: end;
  text-align: right;
}

.greeting--portrait-right .greeting-portrait,
.greeting--portrait-right .greeting-role {
  margin-left: auto;
}

.greeting--portrait-right > .greeting-letter {
  grid-area: letter;
  text-align: left;
}

.greeting > .greeting-letter {
  --letter-line: 36px;
  min-width: 0;
  align-self: start;
  padding: 28px 32px;
  color: var(--ink);
  font-size: 16px;
  line-height: var(--letter-line);
  background: #fff;
  border: 1px solid #e2e6eb;
  box-shadow: 0 5px 20px rgb(31 48 71 / 5%);
}

.greeting-letter__text {
  display: flow-root;
  line-height: var(--letter-line);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--letter-line) - 1px),
    #dfe5ec calc(var(--letter-line) - 1px),
    #dfe5ec var(--letter-line)
  );
}

.greeting .greeting-letter__text > p {
  margin: 0;
  line-height: var(--letter-line);
}

.greeting .greeting-letter__text > p + p {
  margin-top: var(--letter-line);
}

@media (max-width: 1100px) {
  .greeting--portrait-right {
    grid-template-columns: minmax(0, 1fr) 240px;
  }
}

@media (max-width: 800px) {
  .greeting--portrait-right {
    grid-template-columns: minmax(0, 1fr) 180px;
  }
}

@media (max-width: 600px) {
  .greeting > .greeting-letter {
    --letter-line: 34px;
    padding: 20px 18px;
  }
}

@media (max-width: 560px) {
  .greeting--portrait-right {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "person" "letter";
  }
}