@import '../../styles/breakpoints/index';

.tags {
  width: 100%;
  position: relative;
  margin-bottom: calc(var(--margin) * 2);
  padding-left: var(--pageMargin);
  padding-right: var(--pageMargin);
}

.padding {
  box-shadow: inset 0 1px 0 0 var(--color-border);
  padding-top: calc(var(--margin) * 2);
}

.list {
  width: 100%;
  column-count: 2;
  column-gap: var(--gutter);
  align-items: baseline;
  grid-template-rows: auto;

  @media (orientation: portrait) and ($sm) {
    column-count: 3;
  }

  @media (orientation: landscape) {
    column-count: 3;
  }

  @media ($lg) {
    column-count: 4;
  }

  @media ($xl) {
    column-count: 5;
  }
}

.item {
  page-break-inside: avoid;
  break-inside: avoid;
}

.link {
  padding-top: .5rem;
  padding-bottom: .5rem;
  display: block;
  line-height: 0.9;
  color: var(--color-link-secondary);
}

.link:hover {
  color: var(--color-link-secondary-hover);
}

.name {
  margin-right: .5rem;
}

.header {
  margin-bottom: calc(var(--margin) * 0.5);
}
