#approach {
  margin-top: 120px;
  margin-bottom: 120px;
}

#approach .approach__container {
  gap: 40px;
}

#approach .approach-items__container {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  #approach .approach-items__container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.span-1 {
  grid-column: span 1;
}

@media (min-width: 768px) {
  .span-2 {
    grid-column: span 2;
  }
}

#approach .approach-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#approach .approach-item.approach-item-highlighted {
  background-color: var(--stb-orange);
  color: var(--stb-white);
  outline-color: var(--stb-white);
}

#approach .approach-item .icon-heading {
  display: flex;
  gap: 12px;
  align-items: center;
}

#approach .approach-item.approach-item-highlighted .icon-heading .stroke {
  stroke: white;
  fill: none;
}

@media (min-width: 1024px) {
  .approach-heading__container {
    text-align: left;
  }
}