.frontend-hero-card {
  overflow: hidden;
  border: 1px solid var(--theme-frontend-card-border);
  border-radius: 1.5rem;
  background: var(--theme-frontend-hero-background);
  box-shadow: var(--theme-frontend-card-shadow);
  color: var(--theme-text-primary);
}

.frontend-panel,
.frontend-subpanel,
.frontend-post-card,
.frontend-empty-state,
.frontend-notice {
  border: 1px solid var(--theme-frontend-card-border);
  background: var(--theme-frontend-card-background);
  box-shadow: var(--theme-frontend-card-shadow);
  color: var(--theme-text-primary);
}

.frontend-panel,
.frontend-post-card {
  border-radius: 1.5rem;
}

.frontend-subpanel,
.frontend-empty-state,
.frontend-notice {
  border-radius: 1.25rem;
}

.frontend-panel,
.frontend-post-card {
  padding: 1.5rem;
}

.frontend-panel-roomy,
.frontend-post-card-roomy {
  padding: 1.75rem;
}

.frontend-post-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.frontend-post-card:hover {
  border-color: var(--theme-frontend-card-border-hover);
  box-shadow: var(--theme-frontend-card-shadow-hover);
  transform: translateY(-0.125rem);
}

.frontend-subpanel {
  background: var(--theme-frontend-subpanel-background);
}

.frontend-list-item {
  border-radius: 1rem;
  background: var(--theme-frontend-list-item-background);
  color: var(--theme-text-secondary);
}

.frontend-divider-y > :not([hidden]) ~ :not([hidden]) {
  border-top: 1px solid var(--theme-frontend-divider);
}

.frontend-card-divider-top {
  border-top: 1px solid var(--theme-frontend-divider);
}

.frontend-empty-state {
  border-color: var(--theme-frontend-empty-border);
  background: var(--theme-frontend-empty-background);
  color: var(--theme-frontend-empty-text);
}

.frontend-notice-info {
  border-color: var(--theme-frontend-notice-info-border);
  background: var(--theme-frontend-notice-info-background);
  color: var(--theme-frontend-notice-info-text);
}

.frontend-notice-warning {
  border-color: var(--theme-frontend-notice-warning-border);
  background: var(--theme-frontend-notice-warning-background);
  color: var(--theme-frontend-notice-warning-text);
}

.frontend-notice-danger {
  border-color: var(--theme-frontend-notice-danger-border);
  background: var(--theme-frontend-notice-danger-background);
  color: var(--theme-frontend-notice-danger-text);
}

.frontend-notice-danger .frontend-section-heading,
.frontend-notice-warning .frontend-section-heading,
.frontend-notice-info .frontend-section-heading {
  color: inherit;
}

@media (min-width: 1024px) {
  .frontend-hero-card {
    border-radius: 2rem;
  }

  .frontend-panel,
  .frontend-post-card {
    border-radius: 1.75rem;
    padding: 1.75rem;
  }

  .frontend-panel-roomy,
  .frontend-post-card-roomy {
    padding: 2rem;
  }
}

@media (max-width: 640px) {
  .frontend-hero-card,
  .frontend-panel,
  .frontend-post-card,
  .frontend-subpanel,
  .frontend-empty-state,
  .frontend-notice {
    border-radius: 1.25rem;
  }

  .frontend-panel,
  .frontend-post-card,
  .frontend-panel-roomy,
  .frontend-post-card-roomy {
    padding: 1.25rem;
  }
}