@use "@carbon/styles/scss/spacing";
@import "../../root.scss";

.menuLink a {
  display: flex;
  padding: 1rem;
  height: 3rem;
  width: 100%;
  text-decoration: none;
  color: $ui-02;
  background-color: transparent;
  @extend .productiveHeading01;
}

.menuLink a:hover {
  @include brand-01(background-color);
}

.externalLinks {
  border-top: 1px solid;
  @include brand-03(border-top-color);
}

.launchIcon {
  margin-left: spacing.$spacing-03;
}

.menuItemsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust as needed */
  gap: 16px; /* Adjust the gap between items */
}