.featureHero {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  position: relative;
}

.inner {
  display: flex;
  flex-direction: column;
  gap: var(--tome-space-lg);
  padding-block: var(--tome-space-xl);
  grid-column: 1 / -1;
}

.withDecoration::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--tome-color-border) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.4;
  pointer-events: none;
}

/* Layout variants — apply to inner wrapper so subgrid root stays on .featureHero */
.layout-narrow .inner { max-width: 48rem; margin-inline: auto; }
.layout-inline .inner { max-width: 64rem; margin-inline: auto; }
.layout-fullWidth .inner { max-width: none; }

/* Appearance */
.appearance-primary {
  background-color: var(--tome-color-primary);
  color: var(--tome-color-on-primary);
}

.appearance-secondary {
  background-color: var(--tome-color-secondary);
  color: var(--tome-color-on-secondary);
}

.appearance-transparent {
  background-color: transparent;
}

.header {
  display: flex;
  flex-direction: column;
  gap: var(--tome-space-sm);
  position: relative;
}

.eyebrow {
  font-size: var(--tome-type-size-xs);
  font-weight: var(--tome-type-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tome-type-tracking-wider);
  color: var(--tome-color-primary);
}

.appearance-primary .eyebrow {
  color: color-mix(in oklch, var(--tome-color-on-primary) 70%, transparent);
}

.heading {
  font-size: var(--tome-type-size-4xl);
  font-weight: var(--tome-type-weight-bold);
  line-height: var(--tome-type-leading-tight);
  color: var(--tome-color-foreground);
}

.appearance-primary .heading {
  color: var(--tome-color-on-primary);
}

.subtitle {
  font-size: var(--tome-type-size-lg);
  line-height: var(--tome-type-leading-snug);
  color: var(--tome-color-on-surface-muted);
}

.description {
  font-size: var(--tome-type-size-md);
  line-height: var(--tome-type-leading-normal);
  color: var(--tome-color-on-surface-muted);
}

.heroImageWrap {
  border-radius: var(--tome-radius-lg);
  overflow: hidden;
}

.heroImage {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Features grid */
.featuresGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--tome-space-md);
}

.grid-two .featuresGrid { grid-template-columns: repeat(2, 1fr); }
.grid-three .featuresGrid { grid-template-columns: repeat(3, 1fr); }
.grid-one .featuresGrid { grid-template-columns: 1fr; }

.featureCard {
  display: flex;
  flex-direction: column;
  gap: var(--tome-space-xs);
  padding: var(--tome-space-md);
  border-radius: var(--tome-radius-lg);
  background-color: var(--tome-color-surface);
  transition: box-shadow var(--tome-motion-fast);
}

.featureCard:hover {
  box-shadow: var(--tome-shadow-md);
}

.card-small { padding: var(--tome-space-sm); }
.card-medium { padding: var(--tome-space-md); }
.card-large { padding: var(--tome-space-lg); }

.featureImg-left,
.featureImg-right {
  flex-direction: row;
  align-items: flex-start;
}

.featureImg-left {
  flex-direction: row-reverse;
}

.featureIcon {
  font-size: var(--tome-type-size-2xl);
  color: var(--tome-color-primary);
}

.featureImage {
  width: 100%;
  border-radius: var(--tome-radius-md);
  object-fit: cover;
}

.featureImg-left .featureImage,
.featureImg-right .featureImage {
  width: 40%;
  flex-shrink: 0;
}

.featureBody {
  display: flex;
  flex-direction: column;
  gap: var(--tome-space-xxs);
}

.featureTitle {
  font-size: var(--tome-type-size-lg);
  font-weight: var(--tome-type-weight-semibold);
  line-height: var(--tome-type-leading-snug);
}

.featureDescription {
  font-size: var(--tome-type-size-sm);
  line-height: var(--tome-type-leading-normal);
  color: var(--tome-color-on-surface-muted);
}

/* Three steps variant */
.stepNumber {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tome-space-xs);
}

.stepBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tome-space-md);
  height: var(--tome-space-md);
  border-radius: var(--tome-radius-full);
  background-color: var(--tome-color-primary);
  color: var(--tome-color-on-primary);
  font-size: var(--tome-type-size-sm);
  font-weight: var(--tome-type-weight-bold);
  font-family: var(--tome-type-mono);
}

.timelineConnector {
  width: 2px;
  flex: 1;
  min-height: var(--tome-space-md);
  background-color: color-mix(in oklch, var(--tome-color-primary) 30%, transparent);
}

.variant-three-steps .featuresGrid {
  grid-template-columns: 1fr;
}

.variant-masonry .featuresGrid {
  columns: 2;
  column-gap: var(--tome-space-md);
}

.variant-masonry .featureCard {
  break-inside: avoid;
  margin-block-end: var(--tome-space-md);
}

/* CTA */
.ctaWrap {
  display: flex;
  justify-content: center;
}

.cta {
  display: inline-flex;
  align-items: center;
  padding: var(--tome-space-xs) var(--tome-space-md);
  border-radius: var(--tome-radius-md);
  font-size: var(--tome-type-size-base);
  font-weight: var(--tome-type-weight-semibold);
  text-decoration: none;
  background-color: var(--tome-color-primary);
  color: var(--tome-color-on-primary);
  transition: opacity var(--tome-motion-fast);
}

.cta:hover {
  opacity: 0.85;
}
Build better marketing sites

Block Gallery

Type-safe Props

Bundle Registries

Install
