.banner {
  background-color: var(--Background-Secondary);
  padding: var(--Space-x4) var(--Space-x3);
  display: grid;
  align-items: center;
  border-radius: var(--Corner-Radius-Large);
  gap: var(--Space-x4);

  grid-auto-flow: row;
  text-align: center;
}

.text {
  display: grid;
  gap: var(--Space-x15);
}

.icon {
  justify-self: center;
}

.header {
  color: var(--Text-Brand-OnPrimary-1-Heading);
}

@media screen and (min-width: 950px) {
  .banner {
    padding: var(--Space-x2) var(--Space-x4);
    grid-template-columns: auto 1fr auto;
    grid-auto-flow: column;
    text-align: left;
  }
}