consul/consul

.sdg-goals-index {
  .banner,
  .header-card,
  .section-header {
    @include full-width-background($adjust-padding: true);
  }

  .section-header {
    @include full-width-border(bottom, 1px solid #eee, $adjust-padding: true);

    h1 {
      &::before {
        @extend %font-icon;

        background: image-url("sdg.svg");
        content: "";
        display: inline-block;
        height: 1.5em;
        width: 1.5em;
      }
    }
  }

  .sdg-goal-list {
    $spacing: 1.5%;

    @include sdg-goal-list($spacing);

    margin-left: auto;
    margin-right: auto;
    max-width: 60rem;
    width: 100%;

    li {
      line-height: 0;
      margin-left: calc(#{$spacing} / 2);
      margin-right: calc(#{$spacing} / 2);
      width: calc(100% / 6 - #{$spacing});

      .sdg-goal-icon {
        width: 100%;
      }
    }
  }

  .sdg-phase {

    .cards-container {
      @include grid-row-nest;
    }
  }

  .background-header {
    margin-bottom: $line-height;
  }
}