.benefits-hero {
  position: relative;
}

.benefits-hero__grid {
  align-items: center;
}

.benefits-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-16);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.benefits-breadcrumb li::after {
  content: "/";
  margin-left: 0.35rem;
}

.benefits-breadcrumb li:last-child::after {
  content: "";
}

.benefits-breadcrumb a {
  text-decoration: underline;
  text-decoration-color: rgba(139, 123, 255, 0.4);
}

.benefits-hero__content {
  max-width: 36rem;
}

.benefits-hero__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.benefits-hero__media {
  max-width: 32rem;
  margin: 0 auto;
}

.benefits-section-header {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}

.benefits-grid .benefits-card {
  height: 100%;
}

.benefits-inline-media {
  max-width: 20rem;
}

.benefits-visual-grid {
  align-items: center;
  gap: var(--space-40);
}

.benefits-visual-media {
  max-width: 30rem;
  margin: 0 auto;
}

.benefits-visual-content ul,
.benefits-learning-grid ul,
.benefits-community-grid ul {
  padding-left: 1.1rem;
}

.benefits-habits-cta h3 {
  margin-top: 0;
}

.benefits-community-grid {
  gap: var(--space-40);
}

.benefits-final-cta .button + .button {
  margin-left: 0;
}

@media (max-width: 767px) {
  .benefits-hero__media {
    margin-top: var(--space-32);
  }

  .benefits-visual-grid,
  .benefits-learning-grid,
  .benefits-community-grid {
    gap: var(--space-32);
  }
}