/* Hero Card — content surface with hero's larger roundness + soft shadow. */

.hero-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-box);
  background-color: var(--color-base-200);
  overflow: hidden;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.12);
}

.hero-card-bordered {
  box-shadow: none;
  border-width: 1px;
  border-color: var(--color-base-300);
}

.hero-card-body {
  display: flex;
  flex-direction: column;
  padding: var(--padding-box);
  gap: var(--gap-box);
}