.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.linksContainer {
  display: grid;
  justify-content: center;
  gap: var(--s-10);
  grid-template-columns: repeat(2, 100px);
  padding-block: var(--s-8);
  place-items: center;
}

.navLink {
  all: unset;
  border-radius: var(--rounded);
  cursor: pointer;
  font-size: var(--fonts-sm);
}

.navLink::after {
  display: block;
  width: 1.25rem;
  height: 3px;
  border-bottom: 3px solid transparent;
  content: "";
}

.navLink:hover::after {
  border-color: var(--theme-transparent);
}

.navLink:global(.active) {
  font-weight: bold;
}

.navLink:global(.active)::after {
  width: 1.25rem;
  border-color: var(--theme);
}

@media screen and (min-width: 480px) {
  .linksContainer {
    grid-template-columns: repeat(3, 100px);
  }
}

@media screen and (min-width: 640px) {
  .linksContainer {
    grid-template-columns: repeat(var(--tabs-count), 100px);
  }
}
