// Index used on the... index page.

.docs-big-index {
  .column a {
    color: $black;
  }
  .column strong {
    color: $primary-color;
    font-size: 1.25rem;
    display: block;
    margin-bottom: 0.25rem;
  }
  .column a:hover {
    color: $primary-color;

    strong {
      color: lighten($primary-color, 10%);
    }
  }
}

.docs-small-index {
  ul {
    list-style-type: none;
    margin-left: 0;
  }

  li {
    margin-bottom: 0.25rem;
  }
}

.docs-component-inner {
  padding-left: 0.625rem * 2;
  padding-right: 0.625rem * 2;
  @include breakpoint(large) {
    padding-left: 0.9375rem*2.9;
    padding-right: 0.625rem;
  }
  &.has-video-hero {
    padding-top: 2rem;
  }
}

// Index used on the... index page.

.docs-big-index {
  .column a {
    color: $black;
  }
  .column strong {
    color: $primary-color;
    font-size: 1.25rem;
    display: block;
    margin-bottom: 0.25rem;
  }
  .column a:hover {
    color: $primary-color;

    strong {
      color: lighten($primary-color, 10%);
    }
  }
}

.docs-small-index {
  ul {
    list-style-type: none;
    margin-left: 0;
  }

  li {
    margin-bottom: 0.25rem;
  }
}

.docs-component-inner {
  padding-left: 0.625rem * 2.5;
  padding-right: 0.625rem * 2.5;
  @include breakpoint(large) {
    padding-left: 0.9375rem*2.9;
    padding-right: 0.625rem;
  }
  &.has-video-hero {
    padding-top: 2rem;
  }
}

Update padding in smaller states for docs inner component
Update padding in smaller states for docs inner component
