/* VTX r9: two photographic moments, limited to the native home sections. */
.vh9-tools .vh9-tools-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "photo heading" "photo content";
  column-gap: 64px;
  row-gap: 27px;
  align-items: start;
}
.vh9-tools .vh9-tools-heading { grid-area: heading; min-width: 0; }
.vh9-tools .vh9-tools-heading > p:not(.vx-eyebrow) {
  color: #52617c;
  font-size: 18px;
  line-height: 1.65;
  margin-top: 23px;
}
.vh9-tools .vh9-tools-photo {
  grid-area: photo;
  min-width: 0;
  align-self: center;
}
.vh9-tools .vh9-tools-photo > img,
.vh9-final .vh9-final-photo > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}
.vh9-tools .vh9-tools-photo > figcaption {
  color: #52617c;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 12px;
}
.vh9-tools .vh9-tools-content { grid-area: content; min-width: 0; }
.vh9-tools .vx-tool-list { margin-bottom: 25px; }
.vh9-tools .vx-tool-list > a { gap: 20px; padding-block: 21px; }
.vh9-tools .vx-tool-number { width: 42px; font-size: 22px; }
.vh9-tools .vx-tool-list > a > div { min-width: 0; }
.vh9-tools .vx-tool-list h3 { font-size: 19px; line-height: 1.4; }
.vh9-tools .vx-tool-list p { font-size: 15px; line-height: 1.55; }
.vh9-tools .vx-tool-list > a > span:last-child { flex: none; }
.vh9-tools .vh9-tools-content > .vx-text-link {
  max-width: 100%;
  font-size: 16px;
  line-height: 1.55;
  gap: 16px;
}
.vh9-tools .vh9-tools-content > .vx-text-link > span { flex: none; }
.vh9-final .vh9-final-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.vh9-final .vh9-final-copy,
.vh9-final .vh9-final-photo { min-width: 0; }
.vh9-final .vh9-final-copy h2 {
  font-size: clamp(44px, 4.7vw, 64px);
  line-height: 1.16;
  letter-spacing: -.05em;
  color: #f7faff;
}
.vh9-final .vh9-final-copy h2 > span { display: inline-block; color: #adc2ff; }
.vh9-final .vh9-final-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 25px;
  margin-top: 31px;
}
.vh9-final .vh9-final-actions > .vx-btn-light,
.vh9-final .vh9-final-actions > .vx-final-signin { margin: 0; }
.vh9-final .vh9-final-actions > .vx-btn-light {
  max-width: 100%;
  gap: 20px;
}
.vh9-final .vh9-final-photo > figcaption {
  color: #cfdbef;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 12px;
}
@media (max-width: 1100px) {
  .vh9-tools .vh9-tools-grid { column-gap: 42px; }
  .vh9-tools .vh9-tools-heading > p:not(.vx-eyebrow) { font-size: 17px; }
  .vh9-tools .vx-tool-list > a { gap: 15px; }
  .vh9-tools .vx-tool-number { width: 35px; }
  .vh9-tools .vx-tool-list h3 { font-size: 18px; }
  .vh9-final .vh9-final-grid { gap: 42px; }
  .vh9-final .vh9-final-actions > .vx-btn-light { font-size: 16px; }
}
@media (max-width: 900px) {
  .vh9-tools .vh9-tools-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "photo" "content";
    row-gap: 28px;
  }
  .vh9-tools .vh9-tools-heading,
  .vh9-tools .vh9-tools-content,
  .vh9-tools .vh9-tools-photo {
    width: 100%;
    max-width: 640px;
    justify-self: center;
  }
  .vh9-tools .vx-tool-list > a { gap: 22px; }
  .vh9-tools .vx-tool-list h3 { font-size: 19px; }
  .vh9-final .vh9-final-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .vh9-final .vh9-final-copy,
  .vh9-final .vh9-final-photo {
    width: 100%;
    max-width: 640px;
    justify-self: center;
  }
  .vh9-final .vh9-final-copy h2 { font-size: clamp(44px, 7vw, 61px); }
}
@media (max-width: 767px) {
  .vh9-tools .vh9-tools-heading > p:not(.vx-eyebrow) { margin-top: 20px; }
  .vh9-tools .vh9-tools-photo > img,
  .vh9-final .vh9-final-photo > img { border-radius: 13px; }
  .vh9-tools .vx-tool-list > a { gap: 17px; }
  .vh9-tools .vx-tool-number { width: 31px; font-size: 19px; }
  .vh9-tools .vx-tool-list h3 { font-size: 17px; }
  .vh9-tools .vx-tool-list p { font-size: 14px; }
  .vh9-tools .vh9-tools-content > .vx-text-link { font-size: 15px; gap: 12px; }
  .vh9-final .vh9-final-actions { gap: 21px; margin-top: 27px; }
  .vh9-final .vh9-final-copy h2 { font-size: clamp(42px, 8.6vw, 58px); }
}
