.section-features-focus {
  border-top: var(--border--light);
  background-color: var(--cloud);
  padding-top: var(--gap-xl);
  padding-bottom: var(--gap-xl);

  .features-focus {
    max-width: var(--reading-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-l);

    h2, p {
      text-align: center;
    }

    h2 {
      position: relative;

      &::after {
        content: '';
        display: block;
        width: 6rem;
        height: .0625rem;
        background-color: var(--dust);
        margin: var(--gap-l) auto 0 auto;
      }
    }

    p {
      color: var(--ink);
      line-height: var(--line-height--tall);
    }

    .features-focus__content {
      padding-top: var(--gap);
      padding-bottom: var(--gap);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap-l);

      .feature {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--gap-xs);

        svg {
          width: 2.25rem;
          height: 2.25rem;
          margin-bottom: var(--gap-xxs);
        }

        h3, p {
          font-size: var(--font-14);
          text-align: center;
        }

        h3 {
          font-weight: var(--font-heading--bold);
        }
      }
    }
  }
}

@media only screen and (max-width: 989px) {
  .section-features-focus {
    .features-focus {
      .features-focus__content {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}