.appointment {
  color: var(--color-white);
  background: var(--color-primary-strong);
}

.appointment__inner {
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 0.8fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
  padding-block: 3.75rem;
}

.appointment__title {
  max-width: 12em;
  color: var(--color-white);
  font-size: clamp(2.4rem, 3.4vw, 3.25rem);
  font-weight: 620;
}

.appointment__summary {
  max-width: 37rem;
  margin-top: 1rem;
  color: rgb(255 255 255 / 0.76);
  font-size: 1rem;
}

.appointment__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.appointment__note {
  margin-top: 1rem;
  color: rgb(255 255 255 / 0.58);
  font-size: 0.75rem;
}

@media (max-width: 820px) {
  .appointment__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}