@import url("@arc-ui/tokens-arc/dist/custom-media.css");

.product-navigation-grid {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 24px;
  list-style: none;
  margin: 0;
  max-width: 1216px;
  padding: 0;
}

@media (--arc-custom-media-min-width-s-px) {
  .product-navigation-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (--arc-custom-media-min-width-l-px) {
  .product-navigation-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (--arc-custom-media-min-width-xl-px) {
  .product-navigation-grid {
    grid-gap: 32px;
  }
}

.productNavigation-skipLink {
  position: absolute;
  margin-top: 56px;
  width: calc(100% - 32px);
  scale: 0;
}

@media (--arc-custom-media-min-width-m-px) {
  .productNavigation-skipLink {
    position: unset;
    margin-top: 0;
    width: auto;
    margin-left: 12px;
    scale: 0;
  }
}

.productNavigation-skipLink:focus-within {
  scale: 1;
}