section.services {
  background-color: var(--color-primary-light);
}
section.services .container {
  display: flex;
  gap: 2rem;
}

section.services .container > aside {
  width: 30%;
}
section.services .container > aside ul {
  display: grid;
}
section.services .container > aside ul li {
  padding: 12px 24px;
  background-color: var(--color-primary);

  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-black);

  cursor: pointer;

  transition: 0.3s ease;
}
@media (hover:hover) {
  section.services .container > aside ul li:hover {
    color: var(--color-white);
    background-color: hsl(from var(--color-primary) h s calc(l - 15));
  }
}
section.services .container > ul {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  grid-auto-flow: row;
  grid-auto-rows: max-content;
}
section.services .container > ul li {
  width: 100%;
  height: fit-content;
}
section.services .container > ul li a {
  display: block;
  padding: 12px 24px;
  background-color: var(--color-white);
  color: var(--color-black);
  font-size: var(--text-md);

  transition: 0.3s ease;
}
@media (hover:hover) {
  section.services .container > ul li a:hover {
    background-color: var(--color-gray);
  }
}