.growth-callout {
  background: var(--acid);
  color: var(--ink);
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 80px;
  align-items: center;
}

.growth-copy p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 560px;
  margin: 24px 0 30px;
}

.growth-copy .button {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}

.growth-system {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}

.growth-system div {
  border: 1px solid rgba(8, 23, 45, .35);
  border-radius: 12px;
  padding: 20px;
  min-height: 145px;
  background: rgba(255, 255, 255, .55);
}

.growth-system span,
.growth-system b {
  display: block;
}

.growth-system span {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #53600d;
}

.growth-system b {
  font-size: 16px;
  line-height: 1.25;
  margin-top: 45px;
}

.growth-system i {
  font-style: normal;
  color: var(--blue);
}

@media (max-width: 1050px) {
  .growth-callout { grid-template-columns: 1fr; }
  .growth-system { max-width: 780px; }
}

@media (max-width: 760px) {
  .growth-callout h2 { font-size: 47px; }
  .growth-system { grid-template-columns: 1fr; }
  .growth-system i { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 390px) {
  .growth-callout h2 { font-size: 42px; }
}