.panel {
  background-color: var(--panel-background, var(--color-subtle-light));
  border-radius: var(--panel-border-radius, 0.75em);
  border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle));
  color: var(--color-ink);
  display: block;
  padding: var(--panel-padding, 1.5em);
  text-decoration: none;
}

.panel--hover {
  transition: border-color 200ms ease, background-color 200ms ease;

  @media (any-hover: hover) {
    &:hover {
      --panel-background: var(--color-subtle);
      --panel-border-color: var(--color-subtle-dark);
    }
  }
}

.panel__title {
  color: var(--color-ink);
  font-size: 1.1em;
  font-weight: 600;
  margin-block: 0;
  transition: color 200ms ease;
}

.panel__description {
  color: var(--color-subtle-dark);
  display: -webkit-box;
  font-size: 0.9rem;
  margin-block: var(--block-space-half) 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}