.grid {
  margin: 4rem 0;
  padding-left: 0;
}

.card {
  transition-duration: 0.3s;
}
.card:hover.reveal.active {
  transform: scale(1.05);
}
.card.popular {
  background-color: var(--color-accentContentStrong);
  color: var(--color-light);
}
.card.popular img {
  filter: invert(100%);
}

html:has(#theme-switcher [value=dark]:checked) .card img.icon {
  filter: invert(100%);
}
html:has(#theme-switcher [value=dark]:checked) .card.popular img {
  filter: none;
}

.pricing-table {
  border-collapse: separate;
  border-spacing: 0 1em;
  width: 100%;
}
.pricing-table caption {
  text-align: left;
  font-size: 2rem;
  font-weight: bold;
}
.pricing-table td + td {
  padding-left: 1rem;
  text-wrap: nowrap;
  text-align: right;
}
.pricing-table img {
  width: 1.5rem;
}

.package-price {
  font-weight: bold;
  font-size: 1.5em;
}