.featuresSection { margin-top: 40px; & .iconContainer { display: flex; flex-direction: column; align-items: center; margin-bottom: 15px; & .tail { width: 1px; height: 75px; background: linear-gradient(transparent, var(--color-neutral-300)); } & .icon { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; font-size: var(--font-md); background-color: var(--color-neutral-100); border: 1px solid var(--color-neutral-300); border-radius: 50%; } } & .title { margin-bottom: 8px; font-family: var(--font-display); font-size: var(--font-lg); font-weight: 600; text-align: center; } & .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); row-gap: 32px; column-gap: 20px; margin-top: 24px; & .icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 auto; margin-bottom: 12px; font-size: var(--font-md); color: var(--color-foreground-subtle); background: linear-gradient(var(--color-neutral-100), transparent); border: 1px solid var(--color-neutral-200); border-radius: 12px; } & .label { margin-bottom: 8px; font-family: var(--font-heading); font-weight: 600; text-align: center; } & .body { width: 100%; max-width: 275px; margin: 0 auto; line-height: 1.6; color: var(--color-foreground-subtle); text-align: center; } & .link { display: block; margin-top: 8px; font-size: var(--font-sm); font-weight: 500; color: var(--color-foreground); text-align: center; text-decoration: none; } & .soon { display: flex; width: max-content; padding: 6px 12px; margin: 0 auto; margin-top: 8px; font-size: var(--font-2xsm); font-weight: 500; line-height: 1; background: linear-gradient(var(--color-neutral-100), transparent); border: 1px solid var(--color-neutral-300); border-radius: 100px; } } }