.QuickMenu {
  display: flex;
}

.QuickMenu-link {
  display: flex;
  align-items: center;
  padding: var(--spaces);
  border-radius: 40px;
  font-size: 0;
  font-weight: 600;
  color: var(--clr-secondaryGreen);
  aspect-ratio: 1/1;
}

@media screen and (min-width: 1024px) {

.QuickMenu-link {
    padding: var(--spaces) calc(var(--spaces) * 1.5);
}
  }

.QuickMenu-link svg {
    display: block;
    width: calc(var(--spaces) * 1.3);
    height: auto;
  }

.QuickMenu-link.is--active {
    margin-left: calc(var(--spaces) * 0.5);
    background-color: var(--clr-secondaryGreen);
    color: var(--clr-black);
    fill: var(--clr-black);
  }

.QuickMenu-link.is--active:hover {
      background-color: var(--clr-peach);
      color: var(--clr-primary);
    }

.QuickMenu-link:not(.is--active) {
    fill: var(--clr-secondaryGreen);
  }

@media screen and (min-width: 1024px) {

.QuickMenu-link {
    font-size: medium;
    font-size: initial;
    aspect-ratio: initial;
}

    .QuickMenu-link svg {
      display: none;
    }
  }