.c-topics-nav__items {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  box-shadow: inset 0 1px 0 $navigation-color--offset;

  @media (--from-medium-screen) {
    box-shadow: 0 -1px 0 $navigation-color--offset;
  }
}

.c-topics-nav__item {
  flex: 1 0 33.3334%;

  .has-js & {
    @media (--from-medium-screen) {
      flex-basis: 50%;
      min-width: 50%;
    }
  }

  @media (--from-large-screen) {
    flex-basis: 16.6667%;
  }

  svg {
    height: map(sizes, medium);
    width: map(sizes, medium);
    margin: 0 auto map(spaces, xsmall);

    @media (--upto-deep-screen) {
      display: none;
    }

    @media (--from-medium-screen) {
      height: map(sizes, large);
      width: map(sizes, large);
    }
  }
}

.c-topics-nav__label {
  @apply --focusable;
  @apply --navigation-link;
  @apply --typeset-ui;

  display: block;
  box-shadow: 1px 1px 0 $navigation-color--offset;
  padding: map(spaces, small);
  text-align: center;

  @media (--from-shallow-screen) {
    padding: map(spaces, large) map(spaces, medium);
  }

  @media (-ms-high-contrast: active) {
    border: 1px solid;
  }
}
