.feature-page {
  background: #f7f6f3;
  min-height: 100vh;
}

.feature-page__main {
  max-width: var(--layout-max, 1320px);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem)
    max(var(--layout-gutter, clamp(0.9375rem, 2.85vw, 1.875rem)), env(safe-area-inset-right, 0))
    clamp(2.5rem, 5vw, 3.5rem)
    max(var(--layout-gutter, clamp(0.9375rem, 2.85vw, 1.875rem)), env(safe-area-inset-left, 0));
}

.feature-hero__head {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.25rem);
}

.feature-hero__icon {
  width: clamp(64px, 8vw, 80px);
  height: clamp(64px, 8vw, 80px);
  flex-shrink: 0;
  border-radius: 50%;
  background: #e8f0f4;
  box-shadow: inset 0 0 0 1px rgba(45, 80, 88, 0.06);
  box-sizing: border-box;
}

img.feature-hero__icon {
  display: block;
  object-fit: contain;
  object-position: center;
  padding: clamp(10px, 1.4vw, 14px);
}

.feature-hero__icon--fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.feature-hero .bsp-hero__title {
  margin-bottom: 0.2rem;
}

.feature-hero .bsp-hero__sub {
  margin: 0;
}

[data-theme="dark"] .feature-page {
  background: #141619;
}

[data-theme="dark"] .feature-hero__icon {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(231, 233, 238, 0.08);
}

[data-theme="dark"] .feature-hero__icon--fa {
  color: #e7e9ee;
}