/*
 * Feature Component
 * Feature/benefit blocks with icon, title, description
 */

@layer components {
  .feature {
    text-align: center;
  }

  .feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--icon-xxl);
    block-size: var(--icon-xxl);
    margin-inline: auto;
    margin-bottom: var(--block-space);
    background-color: var(--color-white);
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
  }

  .feature__icon .icon {
    inline-size: var(--icon-xl);
    block-size: var(--icon-xl);
    color: var(--color-green);
  }

  .feature__title {
    font-size: var(--text-medium);
    color: var(--color-gray-darker);
    margin-bottom: var(--block-space-half);
  }

  .feature__description {
    font-size: var(--text-normal);
    color: var(--color-gray-dark);
    line-height: var(--leading-relaxed);
  }
}