@layer components {
  .info-card {
    --panel-gap: var(--space-4);
  }

  .info-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px dashed var(--color-gray-light);
  }

  .info-card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(
      in srgb,
      var(--accent, var(--color-brand-green)) 12%,
      var(--color-white)
    );
    color: var(--accent, var(--color-brand-green));

    & svg {
      width: 22px;
      height: 22px;
    }
  }

  .info-card__lead {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-gray-dark);
  }
}