.categories-items {
  height: 30em;
  width: 20em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.categories-items button.category-item {
  height: 3em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  border-radius: .7em;
  background-color: transparent;
  color: var(--text-main);
  gap: .5em;
  padding: 0 1em;
  border: none;
}

.categories-items button.category-item span {
  display: inline-block;
}

.categories-items button.category-item:hover,
.ci-active {
  background-color: var(--color-alt-primary-light) !important;
  text-indent: 1em !important;
}

ul.category-item-details {
  height: 30em;
  width: calc(100% - 22em);
  background-color: var(--bg-main);
  border-radius: .7em;
  padding: .5em;
  transition: height .3s ease-in-out;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, 1fr);
  grid-auto-rows: max-content;
  align-items: auto;
  justify-items: start;
  overflow-y: scroll;
  overflow-x: hidden;
}

ul.category-item-details a {
  height: max-content;
  text-align: left;
}

ul.category-item-details li,
ul.category-item-details span {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  border-radius: .7em;
  color: var(--text-main);
  padding: .5em;
  border: 1px solid var(--bg-main);
}

ul.category-item-details li:hover {
  background-color: var(--color-alt-primary-light);
}

ul.category-item-details ul.pack-list {
  height: 23em;
  width: 100%;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: repeat(3, 1fr);
}

ul.category-item-details ul.pack-list > li {
  height: 100%;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: .7em;
  padding: .5em;
  border: 1px solid var(--color-alt-primary-light);
}

ul.category-item-details ul.pack-list li:hover {
  text-decoration: none;
}

ul.category-item-details ul.pack-list li img {
  height: 10em;
  width: 10em;
  border-radius: .7em;
  object-fit: cover;

}

ul.category-item-details ul.pack-list li span {
  display: flex;
  flex-direction: column;
  border: none;
}

ul.category-item-details ul.pack-list li a {
  width: 95%;
}
ul.category-item-details ul.pack-list li button {
  height: 3em;
  width: 100%;
  background-color: var(--color-alt-primary-light);
  border: 1px solid var(--color-primary-light);
  border-radius: .7em;
}

ul.category-item-details ul.pack-list li button:hover {
  opacity: .7;
}