.direction-detail {
  display: flex;
  min-height: clamp(37.5rem, 41.6667vw, 50rem);
  background: var(--color-surface-raised);
  color: var(--color-on-accent);
}

.direction-detail__visual {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2xl);
  min-width: 0;
  padding: var(--space-xl) calc(var(--space-2xl) + var(--space-sm)) var(--space-cta-inset);
}

.direction-detail__title {
  margin: 0;
  font-size: clamp(2.5rem, 4.4444vw, var(--fs-page-hero-title));
  font-weight: 274;
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  overflow-wrap: anywhere;
}

.direction-detail__bottom { width: min(100%, 36.5rem); }
.direction-detail__description {
  max-width: 24rem;
  margin: 0 0 var(--space-lg);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
  white-space: pre-line;
}
.direction-detail__action { width: min(100%, 15.625rem); min-height: var(--size-cta-button-height); }

.direction-detail__panel {
  width: 33.3333%;
  min-width: 0;
  padding: var(--space-2xl) var(--space-lg);
}
.direction-detail__panel .hero-home__form-note { margin-block-start: 0; }

@media (width < 64rem) {
  .direction-detail { flex-direction: column; }
  .direction-detail__visual { min-height: 32rem; padding: var(--space-xl) var(--container-content-start) var(--space-2xl); }
  .direction-detail__panel { width: 100%; min-height: 34rem; padding: var(--space-xl) var(--container-content-start); }
}

@media (width <= 48rem) {
  .direction-detail__visual { justify-content: flex-start; gap: 1.25rem; min-height: 30rem; padding-block: var(--space-xl) var(--space-2xl); }
  .direction-detail__title { font-size: clamp(2rem, 7vw, 2.75rem); }
  .direction-detail__description { line-height: var(--lh-description); }
  .direction-detail__action { width: 100%; }
  .direction-detail__panel { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
}