/* Final layout pass: a single environmental hero and an orderly module introduction. */
.solutions-hero-image {
  background-image: linear-gradient(90deg, rgba(5, 42, 37, .96) 0%, rgba(5, 48, 42, .80) 38%, rgba(5, 48, 42, .25) 66%, rgba(5, 48, 42, .05)), url('./assets/solutions-environment-hero-v1.png');
  background-position: center;
}

.solutions-copy {
  display: block;
  width: min(1320px, calc(100% - 80px));
  padding: 118px 0 92px;
}

.solutions-copy > p {
  display: block;
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .15px;
  text-transform: none;
}

.solutions-copy h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(52px, 5vw, 78px);
  letter-spacing: -4.1px;
}

.solutions-copy > div {
  width: min(590px, 100%);
  margin-top: 26px;
  padding: 0;
}

.solutions-intro {
  grid-template-columns: minmax(260px, .9fr) minmax(420px, 1.25fr);
  column-gap: 74px;
  row-gap: 20px;
  padding: 72px 0 40px;
}

.solutions-intro > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #168c80;
}

.solutions-intro h2 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(38px, 3.6vw, 56px);
  letter-spacing: -3.1px;
}

.solutions-intro > div {
  grid-column: 2;
  padding: 7px 0 0;
}

.solution-image,
.solution-card.feature .solution-image {
  min-height: 270px;
}

@media (max-width: 900px) {
  .solutions-copy { width: calc(100% - 40px); padding: 92px 0 78px; }
  .solutions-intro { grid-template-columns: 1fr; width: calc(100% - 40px); gap: 20px; padding: 58px 0 34px; }
  .solutions-intro > p, .solutions-intro h2, .solutions-intro > div { grid-column: auto; }
  .solutions-intro > div { padding-top: 0; }
}

@media (max-width: 620px) {
  .solutions-copy { padding: 76px 0 66px; }
  .solutions-copy h1 { font-size: 48px; letter-spacing: -3px; }
  .solution-image, .solution-card.feature .solution-image { min-height: 240px; }
}