section.prices h2 {
  font-weight: 700;
  font-size: var(--text-l3);
  line-height: 30px;
  color: var(--color-black);
}
section.prices > ul {
  margin-top: 1.5rem;
  margin-bottom: 3rem;

  display: flex;
  flex-direction: column;
  gap: 1rem;
}
section.prices > ul > li {
  display: grid;
  grid-template-columns: 1fr min-content;
  gap: 2rem;

  position: relative;
  font-size: var(--text-md);
  line-height: 30px;

  background-color: var(--color-primary);
  border-radius: 20px;
  padding: 20px;
}
section.prices > ul li a {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}
section.prices > ul li a span {
  display: none;
}


section.prices > ul li .title {
  font-weight: 700;
  color: var(--color-white);

  transition: color 0.3s ease;
}
section.prices > ul li .price {
  align-self: center;
  justify-self: center;

  font-weight: 700;
  color: var(--color-secondary);
}
section.prices > ul li .book {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  font-size: var(--text-md);
  z-index: 3;

  font-weight: 500;
  color: var(--color-secondary);
}
section.prices > ul li .book svg {
  color: var(--color-white);

  transition: color 0.3s ease;
}

@media (hover:hover) {
  section.prices > ul li:hover .title {
    color: var(--color-secondary);
  }
  section.prices > ul li:hover .book svg {
    color: var(--color-secondary);
  }
}


section.prices > ul li .title h1,
section.prices > ul li .title h2,
section.prices > ul li .title h3,
section.prices > ul li .title h4,
section.prices > ul li .title h5,
section.prices > ul li .title h6 {
  color: var(--color-primary);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

section.prices > ul li .title p:has(+ *) {
  margin-bottom: 1.5rem;
}

section.prices > ul li .title ul,
section.prices > ul li .title ol {
  list-style-type: disc;
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

section.prices > ul li .title ul li,
section.prices > ul li .title ol li {
  margin-bottom: 0.5rem;
}

section.prices > ul li .title blockquote {
  padding: 1rem;
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-secondary-300);
  margin-bottom: 1.5rem;
}

section.prices > ul li .title img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
}

section.prices > ul li .title table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

section.prices > ul li .title th,
section.prices > ul li .title td {
  padding: 0.75rem;
  border: 1px solid var(--color-gray);
}

@media screen and (max-width: 640px) {
  section.prices > ul li {
    grid-template-columns: 1fr;
  }
  section.prices > ul li .title {
    grid-column: span 2;
  }
  section.prices > ul li .price {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
  }
  section.prices > ul li .book {
    grid-row: 2;
    grid-column: 2;
  }
}