:root {
  --bp-orange: #f97316;
  --bp-coral: #fb7185;
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: #fbfbfd;
  --md-primary-fg-color: #c2410c;
  --md-accent-fg-color: #ea580c;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #10131a;
  --md-default-fg-color: #eef2f7;
  --md-primary-fg-color: #9a3412;
  --md-accent-fg-color: #fb923c;
}

.md-header {
  background: linear-gradient(90deg, #9a3412 0%, #c2410c 58%, #be123c 100%);
}

.md-typeset h1,
.md-typeset h2 {
  font-weight: 750;
  letter-spacing: -0.025em;
}

.md-typeset .grid.cards > ul > li {
  border-color: color-mix(in srgb, var(--bp-orange) 32%, transparent);
  border-radius: 0.8rem;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--bp-orange);
  box-shadow: 0 0.35rem 1.2rem rgb(249 115 22 / 12%);
}

.bp-hero {
  align-items: center;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) 12rem;
  margin: 0.5rem 0 2.2rem;
}

.bp-hero img {
  border-radius: 1rem;
  box-shadow: 0 1.2rem 3rem rgb(15 23 42 / 24%);
}

.bp-kicker {
  color: var(--md-accent-fg-color);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bp-actions {
  margin-top: 1rem;
}

.bp-actions > p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}

.bp-actions .md-button {
  margin: 0;
}

@media screen and (max-width: 44rem) {
  .bp-hero {
    grid-template-columns: 1fr;
  }

  .bp-hero img {
    max-width: 10rem;
    order: -1;
  }
}